vue.set
- 官方解释:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
- 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
- 由于 JavaScript 的限制,Vue 不能检测出数据的改变,所以当我们需要动态改变数据的时候,Vue.set()完全可以满足我们的需求
- 常见的坑就是直接改变了data中复杂类型变量的属性值,视图没有更新
Vue.set( target, key, value )
- target:要更改的数据源(可以是对象或者数组)
- key:要更改的具体数据
- value :重新赋的值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app2">
<p v-for="item in items" :key="item.id">
{{item.message}}
</p>
<button class="btn" @click="btnChange()">改变data中的值</button><br/>
<button class="btn" @click="btnAdd()">新增data中的值</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
el:"#app2",
data:{
items:[
{message:"Test1",id:"1"},
{message:"Test2",id:"2"},
{message:"Test3",id:"3"}
]
},
methods:{
btnChange(){
Vue.set(this.items,0,{message:"Change Test",id:'10'})
},
btnAdd(){
const itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
}
}
});
</script>
</body>
</html>
vue.filter