Tengo un pequeño problema con una aplicación de VueJs. Tengo una matriz con ciertas fechas y otra matriz con algunos otros elementos extraídos de una API que se ve así.

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

Y los elementos de la matriz recuperados que se ven así

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"
  ]
}

Lo que quiero hacer es mostrar para cada fecha de la matriz de fechas, las tareas de la API obtenida a su fecha correspondiente.

Este es mi código de 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>

Y este es el resultado

enter image description here

Como puede ver, tengo 12 tareas que son de la API y si hay algunas tareas que coinciden con esos días de la primera matriz, se muestran, pero también se muestra la declaración else para las tareas restantes que no corresponden a ese día. . Quiero mostrarlo solo una vez y solo para aquellos días que no tienen tareas correspondientes.

¡Gracias de antemano!

0
Chez 25 oct. 2020 a las 03:33

1 respuesta

La mejor respuesta

Crea el siguiente método

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

Cambie el marcado de la siguiente manera:

<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>

Hay otras formas, posiblemente mejores, de lograr esto, pero esta es probablemente la forma con la menor cantidad de cambios.

Incluso podrías hacer esto:

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

Sin necesidad de agregar un método en absoluto

1
Jaromanda X 25 oct. 2020 a las 01:10