在Vue项目中遇到了一个问题--当我在购物车进行数量加减时,视图并没有更新

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

第一种情况:当利用索引改变数组某一项时,页面不会刷新。

运行结果:

解决方法如下:(三种方式都可以解决,使用Vue.set、vm.$set()或者数组的splice方法。)

运行结果:

以上就是如何解决Vue中遇到视图不能自动更新时的解决方案,希望可以帮助到你~~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容