vue中使用v-for循环,动态绑定失效解决方法,循环列表显示/隐藏单独控制实例
作者:cywcd 发布:2020-07-16 14:55 字符数:441 分类:javascript 阅读: 12,938 次 抢沙发
问题场景: 在vue的v-for循环中使用的数组数据list中属性不是在data初始化声明的,而是在后端接口数据返回时动态添加的属性,此时在页面dom中绑定失效。
问题描述:在v-for循环中,如果我们在函数中改变了item中的值,在console.log()中查看是修改成功了,但在页面中没有及时刷新改变后的值。
解决方法:使用vue自带的 this.$forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
循环列表显示/隐藏单独控制实例:
v-for循环列表的动态数据,单独控制每个面板里列表的显示/隐藏切换。
点击循环列表的标题绑定点击事件方法:
toggleShow(item) {
item.isShow = !item.isShow
// 动态绑定失效,强制重新渲染
this.$forceUpdate()
}
这里虽然isShow 数据已经更新,但是页面第一次点击却没有响应,使用this.$forceUpdate() 方法强制重新渲染