VueJS v-else 语句多次渲染答案

【问题标题】：VueJS v-else statement rendering multiple timesVueJS v-else 语句多次渲染
【发布时间】：2020-10-25 00:33:50
【问题描述】：

我有一个 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 语句，这些任务不对应到那一天。我只想展示一次，只针对那些没有相应任务的日子。

提前谢谢你！

【问题讨论】：

如果你有 12 个任务，并且只有 1 个是当天的，那么 11 个不会是……所以你当然会得到 11 个 v-else 的输出，因为它们不匹配v-if 条件
您对解决这个问题有什么建议或不同的方法吗？谢谢！
您需要做的是 a) 一个计算值 (filterdTasks)，它过滤与 day.day 匹配的 tasks ... b) v-if filteredtasks.length == 0 不输出任何任务c) v-else, for ... in filteredTasks
@Marc 我可以这样做，但我想显示一条消息，说明当天没有任务
@Chez 不要将 else 放在 for 循环中。而是在每次匹配计数器增加 1 时添加一个计数器。在一个单独的块中，添加一个 if counter == 0 并在那里呈现今天的无任务。如果您有任务，计数器会上升，因此不会显示文本。

标签： javascript html vue.js vuejs2

【解决方案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)">

根本不需要添加方法

【讨论】：

它确实在工作。非常感谢@Jaromanda！我非常感谢您的帮助和努力！再次感谢您的帮助！