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

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

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

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength


第一种情况:

运行结果:


当利用索引改变数组某一项时,页面不会刷新。解决方法如下:


运行结果:


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

重新渲染数组:


运行结果:


Logo

前往低代码交流专区

更多推荐