vue中 this.$set的用法

Vue.set( target , key , value)的使用

1. target: 要更改的数据源（可以是一个对象或者数组）
2. key 要更改的具体数据 （索引）
3. value 重新赋的值

当点击change按钮的时候，调用this.$set方法，成功显示第三个属性,不然视图没有更新

<template>
 <div id="app">
  <div v-for="item in list" :key="item.id">{{item.name}}</div>
  <button @click="change()">改变数据</button>
 </div>
</template>

<script>
export default {
 name: 'App',
 data () {
  return {
   list: [
        { name: "香蕉", id: "1" },
        { name: "苹果", id: "2" }
      ],
  }
 },
 mounted () {
   this.list[2] = { name:'橘子',id:'3'} //此时对象的值更改了，但是视图没有更新
   // let obj= {name:'橘子',id:"3"}
   // this.$set(this.list,2,obj) //$set 可以触发更新视图
 },
 methods: {
  change(){ 
   this.$set(this.list,2,{name:'橘子',id:'3'})
  }
 }
}
</script>

<style>

</style>

之前在做考培答题的时候遇到过类似问题，就是循环多个复选框el-checkbox-group，这样他的v-model就是对应的不同是数组，要用循环，在初始化的时候给把后台返回的每个多选题对应的数组初始化进去