0条评论
还没有人评论过~
开发Vue的一个组件遇到下面的问题:
<div v-for="item in items" :key="item.id">
<div>{{ item.content.name }}</div>
<img v-if="item.content.src" :src="item.content.src" alt="loading" />
<!--目前这个src还不知道 -->
</div>
在该组件的script中:
export default {
watch:{
items: function(new_val){
console.log( new_val ) ;
}
},
computed:{
items() {
return this.$store.state.items
}
}
}
上面的组件用到了vuex中的items, 这个items的值会进行异步修改. 也就是说, 首次渲染的时候img没有src属性, 图片不会加载; 随后当异步消息到达vuex并修改v-for的遍历对象items后, 我想让这个已经被render的对象更新src, 进而显示图片.
可是看了官方文档[https://cn.vuejs.org/v2/guide/reactivity.html#对于数组], 试了试对items修改时, 使用splice(index, 1, new_val)方法, 结果可以让上面的组件watch到items中src的变化, 但是!!!⚠️ , 真正的问题是v-for渲染不到items的变化, 真实的DOM中src并没有改变, 这就很让人头疼, 不知道哪位大神可以解答一下, 感谢