时间戳

首页 > 解决方案 > v-for 和 v-if 导致未定义变量的问题

javascript - v-for 和 v-if 导致未定义变量的问题

问题描述

在我的 Vue 应用程序中，我有一小行基于 v-for 循环的代码，它一直有效，直到我将 V-IF 放入其中。

以下作品：

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

但是，当我尝试让它仅在对象中的日期与日期对象匹配时显示该值时，我得到它store是未定义的

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

这是我的对象：

stores: [
  {
    store: "123",
    date: "2021-09-01",
    stock: "145"
  }
]

dates: [
  {
    date: "2021-09-01"
  }

]

为什么我在尝试匹配 v-if 中的日期时会遇到这样的问题？

标签： javascriptvue.js

解决方案

你犯了一个小错误。date应该是date.date！

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

推荐阅读