vue数组中数据变化但是视图没有更新解决方案
2017-07-22 14:37
991 查看
场景
在我使用vuex的过程中,使用computed获取数据。获取到的数据格式是这个样子的http://www.cnblogs.com/sufubo/p/6906261.html#undefinedcarts: [{}, {}, {}]
但是我在这个页面中需要给这个数据额外添加一个数据字段
carts[index].editState = false;
遇到的问题
当我这样开始做的时候,是直接在conputed计算属性中获取这个值,视图没有更新。参考这篇文章:https://cn.vuejs.org/v2/guide/computed.html
计算属性是依赖于data属性中的数据存在的,只有data依赖中的数据变化,computed数据才会变化,视图才会更新。
还是没有更新
在上面把computed已经改为依赖data了,data进行变化,可是视图还没更新,于是我深入响应式原理。参考这篇文章:https://cn.vuejs.org/v2/guide/reactivity.html
里面有一句话:
有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
使用这种给添加新属性,我原来是直接通过点语法的,所以vue并没有给我添加的新属性增加get和set监听。
解决办法
使用Object.assign()创建新对象,并且computed的属性依赖于data的属性,类似下面这种:data () { return { carts: this.$store.state.carts } }, computed: { getCarts() { for (let i = 0; i < this.carts.length; i++) { this.carts[i] = Object.assign({}, this.carts[i], { editState: false }); } this.carts = Object.assign({}, this.carts); return this.carts; } }
在改变其中是数据的时候,因为是数组。
参考这篇文章:
https://cn.vuejs.org/v2/guide/list.html#数组更新检测
https://cn.vuejs.org/v2/guide/list.html#注意事项
数组比较特殊需要使用与他匹配的变异方法变化数据才能被检测到。
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue) example1.items.splice(newLength)
参考这两篇文章,我是这样写的:
editNum(index) { console.log(this.carts[index].editState); let obj = this.carts[index]; obj.editState = !obj.editState; this.$set(this.carts, index, obj); console.log(this.carts[index].editState); }
总结
遇到问题先谷歌和百度猜测哪里出了问题,去看官方文档原理
vue数据变化视图没更新去看响应式原理,和数组变异原理。
vue 直接改变数组数据不刷新
因为 javascript 的限制,Vue.js 不能检测到下面数组变化:直接用索引设置元素,如 vm.items[0] = {};
修改数据的长度,如 vm.items.length = 0。
为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:
// 与
example1.items[0] = ...相同,但是能触发视图更新
example1.items.$set(0, { childMsg: ‘Changed!’})
或者使用vue变异方法:
[javascript] view plain copy print?<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>Document</title>
<script src=”vue.js”></script>
</head>
<body>
<div id=”demo”>
<a @click=”onClick”>触发一个方法函数</a>
{{aa[0]}}
{{$data | json }}
</div>
<script>
new Vue({
el: ’#demo’,
data: {
n: 0,
aa:[1,3,4]
},
methods: {
onClick: function (e) {
// console.log(e.targetVM);
// console.log(e.target.tagName);// “A”
// console.log(e.targetVM === this);// true
this.aa = [];
console.log(JSON.stringify(this.aa))
var bb = [‘a’,‘b’]
this.aa = bb
//this.aa.push(…bb)
console.log(JSON.stringify(this.aa))
}
}
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="demo"> <a @click="onClick">触发一个方法函数</a> {{aa[0]}} {{$data | json }} </div> <script> new Vue({ el: '#demo', data: { n: 0, aa:[1,3,4] }, methods: { onClick: function (e) { // console.log(e.targetVM); // console.log(e.target.tagName);// "A" // console.log(e.targetVM === this);// true this.aa = []; console.log(JSON.stringify(this.aa)) var bb = ['a','b'] this.aa = bb //this.aa.push(...bb) console.log(JSON.stringify(this.aa)) } } }); </script> </body> </html>
相关文章推荐
- vue数组中数据变化但是视图没有更新解决方案
- vue数组中数据变化但是视图没有更新解决方案
- Vue 数组视图不能更新的解决方案
- 一个“错误”的vuex写法:vuex刷新了数据但是视图没有刷新
- vue 循环对象,数据更新,但是视图未刷新
- vue数组操作不更新视图问题
- vue中修改了数据但视图无法更新的情况
- Vue.js 数据更新后,视图不会更新的异常
- Oracle 没有查询数据,但是视图中有
- vue数据绑定数组,改变元素时不更新view问题
- vue中修改了数据但视图无法更新的情况
- android使用notifyDataSetChanged()方法,adapter的数据更新了,但是ListView的内容没有更新;
- vue v-for初始化后, 数组更新但视图没更新的处理
- mvc 分部视图(Partial)显示登陆前后变化以及Shared文件夹在解决方案资源管理器中没有显示的问题
- Vue.set()动态的新增与修改数据,触发视图更新的方法
- 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
- Vue中数组数据的更新问题
- vue 二维数据内容变化刷新视图的解决办法
- android使用notifyDataSetChanged()方法更新数据失效,adapter的数据更新了,但是ListView的内容没有更新;
- OleDbDataAdapter.update更新数据成功,但数据没有变化