[Vuejs]-How to do conditional rendering in Vue

by

0👍

The error is in this block of code

<template>
  <div v-for="(item, index) in items" :key="index" class="tasks">
    <div v-for="(task, index1) in item[1]" :key="index1" class="tasksforthis">
      <div
        class="filtered__tasks"
        v-if:="`{{ item[0].list_id }} == {{ task.list_id }}`"
      ></div>
    </div>
  </div>
</template>

the first v-for is cycling through each of your items (you are already doing this with the v-for above on div with class="all__lists" to display your list cards) and the second is cycling though each of their tasks.

remove the first v-for like below

<template>
  <div v-else class="has_tasks">
    <h4>Here are your tasks</h4>
    <div v-for="(task, index1) in item[1]" :key="index1" class="tasksforthis">
      <div
        class="filtered__tasks"
        v-if:="`{{ item[0].list_id }} == {{ task.list_id }}`"
      ></div>
    </div>
    <router-link
      class="createList"
      :to="`/createTask/${id}/${item[0].list_id}`"
    >
      <fa class="list_plus" icon="fa-solid fa-plus" />
    </router-link>
  </div>
</template>

Leave a comment