Vue中v-for内替换v-if为computed属性后切换月份失效问题

问题根因 #

你的问题是computed写法错误导致的，完全不需要退回v-if方案，修正写法即可正常使用：

• 你直接在computed里对引用类型的birthdays原数组执行splice操作，这个方法是原地修改数组，第一次计算后原数组就被永久删除了不符合条件的项，后续切换月份时原数组已经没有完整数据，自然功能失效。
• 首次加载看到全量数据闪动，是因为你在data里错误地把birthdays初始化为空对象{}，异步数据返回前渲染逻辑异常导致的。

正确实现方式 #

1. 修正computed逻辑，不要修改源数据，直接返回过滤后的新数组 #

computed: {
  fiestas() {
    // 用filter返回新数组，完全不改动原数据源
    return this.birthdays.filter(item => item.month[this.month])
  }
}

2. 修正data的初始值，避免闪动 #

data() {
  return {
    // 原数据是数组类型，初始化为空数组而非空对象
    birthdays: [],
    month: new Date().getMonth() + 1,
  };
}

3. 模板改成遍历computed属性，移除v-if #

<tr v-for="birthday in fiestas" :key="birthday.name">
  <td class="px-6 py-4 whitespace-nowrap">
    <div class="flex items-center">
      <div class="text-sm font-medium text-gray-900">
        {{ birthday.name }}
      </div>
    </div>
  </td>
</tr>

补充说明 #

这种场景用computed过滤完全符合Vue最佳实践，性能比v-for和v-if同用更高，因为computed会缓存计算结果，只有依赖的month或者birthdays变化时才会重新计算。注意永远不要在computed里修改组件的源状态，computed应该是纯函数，只做计算返回新值，不要产生副作用。

内容的提问来源于stack exchange，提问作者jaribu