Vue双向绑定失效? 数组对象双向绑定不成功?

• 做sku商品时遇到一个坑, 因为商品属性名, 商品属性值, 全都是用户动态添加的, 输入完后点击一键添加进表格, 然后再进行匹配, 再渲染,

然后发现, 添加多数组时, 循环套循环, 双向绑定不生效了

然后就找, 首先我们要知道哪些方法, 会出发vue的双向绑定, 耳熟能详的肯定就是Vue.set()或者this.$set()

// 如下图
let obj = {};
Vue.set(obj, 'name', '张三');
this.$set(obj, 'name', '李四');

那在数组嘞, 有哪些方法可以触发双向绑定呢

• push()
• pop()
• shift()
• unshift()
• splice()
• reverse()
  这些都是可以处罚的, 然后, 一般调取接口或者给接口传值, 肯定是数组对象, 一般的赋值的话, 比如说去循环

let arr = [
  {
    name: '张三',
    age: 20,
    sex: '男'
  },
  {
    name: '李四',
    age: 20,
    sex: '男'
  }
]
for(let i = 0; i < arr.length; i++) {
    this.$set(arr[i], 'sex', '女')
}

如果遇到数组已经改变值了, 但是页面上又没有渲染, 可以使用this.$forceUpdate(), 但是该方法不推荐使用

还有一种, 就是你已经嵌套了很多环了, 然后去动态添加值, 改变值, 然后没有效果, 页面不刷新, 使用this.$set()和this.$forceUpdate()都不起作用, 那么就使用数组的splice()删除对应要添加的值, 再重新添加;

for(let j = 0; j < this.list.length; j++) {
      console.log(this.list[j][`${arr[i].type}`])
      str = JSON.parse(JSON.stringify(this.list[j]));
      str = Object.assign({}, str, {
             [`${arr[i].type}`]: arr[i].setValue
      })
      this.list.splice(j, 1);
      this.list.push(str);
}