错误做法:
直接对数据元素进行更改,错误做法:
// 不能动态响应
this.photoArr[index].weight= 200;
这种修改方式确实把数据给更改成功了,在控制台也能够打印出更改后的值,但是页面不会同步更新。原因如下:
由于 JavaScript 的限制 Vue 不能检测以下数组的变动[1]:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
列如:
var vm = new Vue({
data: {
item: ['a', 'b', 'c']
}
})
vm.item[1] = 'x' // 不是响应性的
vm.item.length = 2 // 不是响应性的
正确做法:
vue.js
在vue.js中直接使用$set()方法进行更新
参考地址:https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
uni-app
// 直接更新数组某个元素的属性,视图上不会同步更新,要使用这种方式。
/**
* @param photoArr 所要更新的数组
* @param pIndex 所要更新的数组的哪一项
* @param pItem 更新后的值
*/
that.$set(that.photoArr, pIndex, pItem);
实例:
data(){
return {
list:[
{
name:123,id:1},
{
name:"测试",id:2}
]
}
}
调用方法:this.$set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值
mounted() {
this.list[2] = {
name:"最新数据,但不能同步渲染",id:3};
console.log(this.list[2]);//控制台已经打印出来了
this.$set(this.list,2,{
name:"最新数据",id:3});//用this.$set方法把更新的数据更新到视图上去
}