Vue.set( target , key , value)的使用
- target: 要更改的数据源(可以是一个对象或者数组)
- key 要更改的具体数据 (索引)
- 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就是对应的不同是数组,要用循环,在初始化的时候给把后台返回的每个多选题对应的数组初始化进去