数组,导致图片没有显示的问题"/>
Vue 不能检测数组,导致图片没有显示的问题
- 1.问题
- 2.解决
- 3.总结
- 检测变化的注意事项
- 1.数组
- 1.对象
1.问题
前两天遇到了一个图片显示不出来的问题
这是图片地址,完了遍历到 :src中,但是图片没出来
返回信息里面是有图片地址的,一切都很正常,这是个什么情况呢
另外我发现,我要是改动一下别处的代码,图片就出来了,嗯哼,这就很神奇了
哦~~,原来这是个数据没有实时响应的问题啊
2.解决
经过一番的查阅,发现这个问题其实vue官网上是有解释的:
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化
因为我这种写法相当于对数组内部的值进行修改了,vue没法检测
于是乎,我把代码改了一下,使用$set方法
搞定,图片出来了
3.总结
提示:来自vue官网深入响应式原理章节
检测变化的注意事项
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化
1.数组
Vue 不能检测以下数组的变动:
1.当利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
2.当修改数组的长度时,例如:vm.items.length = newLength
举个例子:
var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题,可以使用 splice:
vm.items.splice(newLength)
1.对象
vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如:
var vm = new Vue({data:{a:1}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如,对于:
Vue.set(vm.someObject, 'b', 2)
还可以使用 vm.$set 实例方法
this.$set(this.someObject,'b',2)
有时可能需要为已有对象赋值多个新 property,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新 property 不会触发更新。在这种情况下,就应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
好了就酱,总结都是从官网贴的,哈哈哈哈哈… … …
更多推荐
Vue 不能检测数组,导致图片没有显示的问题
发布评论