uni-app中@open事件使用后数据更新成功但未渲染，添加this.$forceUpdate()后可解决

uni-app中@open事件使用后数据更新成功但未渲染，添加this.$forceUpdate()后可解决

alert(1) // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制， // 原本为’false’，再次设置为’false’会无效 this.dataList[index].show = true; this.dataList.map((val, idx) => { if (index != idx) this.dataList[idx].show = false; }) this.$forceUpdate()

1 回复

更多关于uni-app中@open事件使用后数据更新成功但未渲染，添加this.$forceUpdate()后可解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，@open事件触发时数据更新但视图未渲染是常见问题，这通常与Vue的响应式更新机制有关。

您遇到的问题是因为直接修改数组元素时，Vue无法自动检测到这种变化。this.$forceUpdate()强制重新渲染确实能解决，但这并非最佳方案。

更优雅的解决方案是使用Vue.set或数组的splice方法：

// 方案1：使用Vue.set
this.$set(this.dataList[index], 'show', true)
this.dataList.forEach((item, idx) => {
  if (index !== idx) {
    this.$set(this.dataList[idx], 'show', false)
  }
})

// 方案2：创建新数组触发响应式更新
this.dataList = this.dataList.map((item, idx) => ({
  ...item,
  show: idx === index
}))
回到顶部