Vue中v-for嵌套使用v-if匹配日期时报store未定义如何解决？

报错核心原因 #

你遇到的store未定义报错，本质是Vue不同版本中v-if和v-for的优先级差异导致的：

• Vue 3 中，同一元素上v-if的优先级高于v-for，如果你实际代码是把v-for="store in stores"和v-if="store.date === date"写在了同一个<th>标签上，那么v-if执行时，v-for的store变量还未初始化，自然会抛出未定义错误。
• 你给出的示例代码虽然把v-for写在了外层div上，但大概率是实际书写时出现了标签嵌套、属性归属错误，才触发了优先级问题。

隐藏逻辑问题 #

即使修复了store未定义的报错，你的匹配逻辑也不会生效：
外层v-for="date in dates"拿到的date是dates数组中的对象（结构为{date: "2021-09-01"}），而store.date是字符串类型的日期值，直接用===匹配永远返回false，需要修正匹配条件。

修复方案 #

方案1：调整指令位置（易适配） #

不要把两个指令写在同一元素上，保留嵌套结构，同时修正匹配条件、补充v-for必填的key属性即可：

<div v-for="dateItem in dates" :key="dateItem.date">
  <div v-for="store in stores" :key="store.store">
    <th v-if="store.date === dateItem.date">@{{store.stock}}</th>
  </div>
</div>

这里特意将外层循环变量命名为dateItem，避免和属性名date混淆，降低出错概率。

方案2：计算属性提前过滤（性能更优） #

嵌套循环加条件判断的渲染性能较差，推荐先在计算属性中预处理好日期和库存的映射关系，再直接渲染：

// 组件computed选项
computed: {
  dateStockMap() {
    const map = {}
    this.stores.forEach(store => {
      map[store.date] = map[store.date] || []
      map[store.date].push(store)
    })
    return map
  }
}

模板部分直接使用预处理后的数据：

<div v-for="dateItem in dates" :key="dateItem.date">
  <th v-for="store in dateStockMap[dateItem.date] || []" :key="store.store">
    @{{store.stock}}
  </th>
</div>

该方案完全避免了模板中的条件判断，渲染效率更高，也更易维护。

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