Vue 坑

1、 v-model 属性不能响应改变

原因应该是data中的引用对象改变，导致watch监听的属性重新绑定，而新的tableData数据中没有needPush 字段，所以这个属性就不会响应，需要用$set添加属性

1
2
3
4
<el-switch
  v-model="tableData.needPush"
  :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

data() {
    return {
      labelPosition: 'right',
      value: false,
      tableData: {
        trainingName: '',
        subTitle: '',
        title: '',
        trainingHeadImg: '',
        courseCoverImg: '',
        status: 0,
        categoryId: null,
        projectId: null,
        description: '',
        courseCoverImg: '',
        trainingHeadImg: '',
        rank: null,
        needPush: 0, // 声明了该属性
      },
  ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

created() {
    this.getData();
  },
  methods: {
    getData() {
      const id = +this.$route.query.id;
      if (isNaN(id)) return;

      this.$axios.get('course/management/detail', { params: { courseId: id } })
        .then(res => {
            this.tableData = res.data; // 没有needpush 属性
            this.tableData.needpush = 0; // 设置成功后使用switch 组件改变属性不响应，改变对象中其他属性，needpush 值改变？？？？
            // this.$set(this.tableData, 'needPush', 0);解决方法
        });
    },