前阵子将项目搬上Vue的时候偶遇一个突发问题
当对象添加或删除成员时页面无法实时更新渲染,但是数组是正常的
目测是ob没有监听到对象的成员有变化
查看一些大家的求助回答是说ob监听的是数组长度的变动对象默认没有长度新增成员时不会自增长度
所以监听不到对象的变化最近大脑过于疲惫懒得看文档了…
不多废话解决方式直接上代码
在实例内部可以用设置和删除
美元
美元。集(this.age,“年龄”,18);
美元。删除(this.age,“年龄”);
之前
也可以直接调用Vue的设置和删除
让vm=new Vue ({
埃尔:“#应用”,
数据:{
年龄:{}
}
});
Vue.set (vm.age,“年龄”,18);
Vue.delete (vm.age,“年龄”);
组件基本代码:
& lt;风格lang=叭埂北?
& lt;/style>
& lt; template>
& lt; div>
& lt; div>
& lt; div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
}
},
方法:{
前(){
}
}
}
& lt;/script>
1。数组的增加,删除(数组的推动等方法排除)
& lt;/style>
& lt; template>
& lt; div>
& lt; div>
& lt; div>
& lt; div)=跋钕钅俊痹?
& lt; span>{{项}}& lt;/span>
& lt;/div>
& lt;按钮@click=扒啊弊４莂nniu
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
项目:11日,22日,
obj: {“aa”, b:“bb”}
}
},
方法:{
前(){
这一点。项目[2]=33;//这样的写法数据是无法重新渲染的
}
}
}
& lt;/script>
点击按钮操作前事件前后,没发生变化
<>强解决方法:
就是利用数据的推动方法是可以实现的
利用Vue。集方法
具体实现如下:
方法:{
前(){
设置(这美元。项目2 33)
}
},
之前
同理,如果项目:[{答:“11”}]→项目:[{答:“11”,乙:“22”}]
& lt; div)=跋钕钅俊痹?
& lt;跨度v=" (i, j)项“在{{我}},{{j}} & lt;/span>
& lt;/div>
这一点。项目[0]=对象。分配({}。项目[0],{b: ' 22 '});
设置(这美元。项目,0,this.items [0]);
2。给对象增加新属性(同理)
& lt; template>
& lt; div>
& lt; div)=皁bj项目”在
& lt; span>{{项}}& lt;/span>
& lt;/div>
& lt;/div>
& lt;/template>
数据(){
返回{
obj: {“aa”, b:“bb”}
}
}
方法:{
前(){
这一点。obj [' c ']=' 000 ';//不起作用
设置(这美元。obj, ' c ', ' 000 ');//起作用
}
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
