vue中使用v-for循环,动态绑定失效解决方法,循环列表显示/隐藏单独控制实例_蓝戒的博客


vue中使用v-for循环,动态绑定失效解决方法,循环列表显示/隐藏单独控制实例

问题场景: 在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()  方法强制重新渲染

本文固定链接: http://www.webzsky.com/?p=1415 | 蓝戒的博客

cywcd
该日志由 cywcd 于2020年07月16日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: vue中使用v-for循环,动态绑定失效解决方法,循环列表显示/隐藏单独控制实例 | 蓝戒的博客

vue中使用v-for循环,动态绑定失效解决方法,循环列表显示/隐藏单独控制实例:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×