vue 数据动态响应(Vue.set方法)
当vue实例已经创建完成,需要对实例进行赋值修改是,视图没有更新;
例如:修改数组其中一个值的时候,数据已经修改,但视图不更新;
1 <div> 2 <ul> 3 <li v-for="item in list"> 4 {{item}} 5 </li> 6 </ul> 7 <a @click="clickBtn" class="primary mr-2">刷新</a> 8 </div>
1 data () { 2 return { 3 list: ['a', 'b', 'c'], 4 } 5 }, 6 methods: { 7 clickBtn () { 8 this.list[0] = 'x'; 9 console.log(this.list); 10 } 11 }
刷新后效果:
Vue.set(target,key,value) 方法
target:修改的对象
key:属性
value:修改的值
1 data () { 2 return { 3 list: ['a', 'b', 'c'] 4 } 5 }, 6 methods: { 7 clickBtn () { 8 this.$set(this.list, 0, 'x') 9 } 10 }
刷新后效果:
复杂一点的数据赋值事例
1 <div> 2 <ul> 3 <li v-for="(item,key) in objList"> 4 {{key}}:{{item}} 5 </li> 6 </ul> 7 <a @click="clickBtn" class="primary mr-2">刷新</a> 8 </div>
1 data () { 2 return { 3 objList: { 4 a: ['a', 'b', 'c'], 5 b: 1, 6 c: 2 7 } 8 } 9 }, 10 methods: { 11 clickBtn () { 12 this.$set(this.objList['a'], 0, 'e') 13 } 14 }