Taro 中 Vue 写法下 v-for 渲染列表不更新怎么办？

司马会静提问于 2026-03-08 21:44:18 阅读 5

框架

我在 Taro 里用 Vue 语法写了个列表，数据变了但页面没重新渲染，明明 this.list 已经 push 了新项，是不是写法有问题？

试过用 $set 也不行，控制台打印数据是对的，就是 DOM 没变。

<template>
  <view class="list">
    <view v-for="(item, index) in list" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  onShow() {
    this.list.push({ name: 'new item' })
  }
}
</script>

我来解答赞 1 收藏

反馈

1 条解答

萌新.芳妤 Lv1

这问题太常见了，Taro+Vue的坑我都踩烂了。关键点是数组的响应式问题，直接上解决方案：

1. 不要用push，改用concat或者直接赋值新数组：

this.list = this.list.concat({ name: 'new item' })

// 或者

this.list = [...this.list, { name: 'new item' }]

2. 如果非要原地修改，用Vue.set（在Taro里是this.$set）：

this.$set(this.list, this.list.length, { name: 'new item' })

3. 还有一种更骚的操作，强制刷新组件（不推荐但能应急）：

this.$forceUpdate()

我用第一种方案最多，简单省事。你的代码问题就是直接push了，Vue/Taro检测不到数组变化。

2026-03-08 22:04