VueJS v-else 語句多次渲染

Question

我有一個 VueJs 應用程序的小問題。 我有一個包含特定日期的數組和另一個包含從 API 獲取的其他項目的數組，看起來像這樣。

const datesArr = [25-09-2020, 26-09-2020, 27-09-2020, 28-10-2020];

和獲取的數組項看起來像這樣

const fetchedArr = {
  [
    name: "Product 1",
    description: "Lorem ipsum",
    price: 25,
    date: "25-10-2020"
  ],
  [
    name: "Product 2",
    description: "Lorem ipsum",
    price: 35,
    date: "26-10-2020"
  ],
  [
    name: "Product 3",
    description: "Lorem ipsum",
    price: 15,
    date: "28-10-2020"
  ]
}

我想要做的是顯示日期數組中的每個日期，從獲取的 api 到對應日期的任務。

這是我的 vuejs 代碼。

<div
   v-for="(day, index) in nextSixDays"
   :key="index"
   >
<div >{{day.day == nextSixDays[0].day ? 'Tomorrow' : day.formatted}}</div>
<div
   v-for="(task, index) in tasks"
   :key="index"
   >
   <div
      v-if="day.day == task.date"
      >
      {{task.name}}
   </div>
   <div v-else>No tasks for this day</div>
</div>

這就是結果

如您所見，我有 12 個來自 API 的任務，如果有一些任務與第一個數組中的那些天匹配，則會顯示它們，但它也會顯示與那天不對應的其余任務的 else 語句. 我只想展示一次，只展示那些沒有相應任務的日子。

先感謝您！

Answer 1

創建以下方法

methods: {
  haveTask(day) {
    return this.tasks.some(task => task.day === day)
  }
}

更改標記如下：

<template v-if="haveTask(day.day)">
  <div v-for="(task, index) in tasks" :key="index">
    <div v-if="day.day == task.date">
      {{task.name}}
    </div>
  </div>
</template>
<div v-else>No tasks for this day</div>

還有其他可能更好的方法來實現這一點，但這可能是更改最少的方法

你甚至可以這樣做：

<template v-if="tasks.some(task => task.day === day.day)">

根本不需要添加方法