Comment faire un rendu conditionnel dans Vue

Question

Je développe une application qui peut être utilisée pour créer des tâches et les regrouper dans des listes pour les suivre efficacement. J'ai créé une liste et des tâches dans la liste.

J'essaie de restituer toutes les tâches qui appartiennent à une liste dans une liste. Cependant, lorsque j'écris le code vue pour cela, je rencontre un problème. Au lieu de restituer les tâches qui appartiennent uniquement à cette liste, mon code génère toutes les tâches de la base de données. Quelqu'un peut-il m'aider à trouver la bonne façon d'afficher uniquement les tâches appartenant à une liste spécifique ?

DashboardView.vue

<template>
  <div class="dashboard">
    <Navbar class="navbar__dash" />
    <h1 class="dashboard__welcome">Welcome {{ name }}</h1>
    <div class="listview">
      <div class="no__lists" v-if="len_list === 0">
        <h2 class="no_lists">There are No lists here tap to add</h2>
      </div>
      <div class="has__lists" v-else>
        <div class="all__lists" v-for="(item, index) in items" :key="index">
          <div class="list">
            <div class="title">
              <div class="title__options">
                <h1 class="list_name">{{ item[0].list_name }}</h1>
                <Dropdown />
                <!-- V-menu -->
                <!--menu ends-->
              </div>
            </div>
            <div class="body">
              <div class="no_tasks" v-if="item[0].no_of_tasks === 0">
                <h3>There are no tasks added yet</h3>
                <router-link
                  class="createList"
                  :to="`/createTask/${id}/${item[0].list_id}`"
                >
                  <fa class="list_plus" icon="fa-solid fa-plus" />
                </router-link>
              </div>
              <div class="has_tasks" v-else>
                <h4>Here are your tasks</h4>
                <div class="tasks" v-for="(item, index) in items" :key="index">
                  <div
                    class="tasksforthis"
                    v-for="(task, index1) in item[1]"
                    :key="index1"
                  >
                    <div
                      class="filtered__tasks"
                      v-if:="`{{ item[0].list_id }} == {{ task.list_id }}`"
                    ></div>
                  </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>
            </div>
            <div class="footer">
              Number of Completed tasks: {{ item[0].no_completed }}/{{
                item[0].no_of_tasks
              }}
            </div>
          </div>
        </div>
      </div>
      <router-link :to="`/createList/${id}`">
        <fa class="plus__icon" icon="fa-solid fa-plus" />
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Dropdown from '@/components/DropdownList.vue';
import Navbar from '../components/NavBar.vue';
export default {
  name: 'DashboardView',
  data() {
    return {
      name: localStorage['name'],
      len_list: 0,
      items: [],
      id: localStorage['id'],
    };
  },
  methods: {
    getTrackers() {
      const path = 'http://localhost:5000/dashboard/' + localStorage['id'];
      axios
        .get(path)
        .then((res) => {
          this.items = res.data.list;
          this.len_list = res.data.list[0][0]['len_list'];
          console.log(res.data.list);
          for (let i = 0; i < res.data.list.length; i++) {
            console.log(res.data.list[i][1]);
            for (let j = 0; j < res.data.list[i][1].length; j++) {
              if (
                res.data.list[i][1][j]['list_id'] ==
                res.data.list[i][0]['list_id']
              ) {
                console.log(res.data.list[i][1][j]['title']);
                console.log(res.data.list[i][0]['list_id']);
              }
            }
          }
        })

        .catch((err) => {
          console.log(err);
        });

      console.log(this.items);
    },
  },
  components: {
    Navbar,
    Dropdown,
  },
  created() {
    this.getTrackers();
  },
};
</script>

Je reçois les données dans le tableau de bord via le format JSON. Des exemples de données pourraient être : 

Mon code ressemble actuellement à ceci :

Mais je veux que le backlog contienne les tâches GO et Amaterasu, Heisenberg ne devrait afficher que les tâches GO, New et AK, etc. C'est-à-dire que je veux uniquement que la liste restitue uniquement les tâches qui la contiennent. Cela me serait très utile si quelqu'un pouvait me dire comment le restituer correctement.

Answer 1

L'erreur apparaît dans ce code

La première boucle v-for parcourt chacun de vos éléments (vous l'avez déjà fait en utilisant le v-for ci-dessus avec class="all__lists" sur le div pour afficher votre carte de liste), la deuxième boucle v-for parcourt chaque projet tâche.

Supprimez le premier v-for comme indiqué ci-dessous