Maison > Questions et réponses > le corps du texte
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.
P粉9669797652024-04-02 12:54:13
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
Here are your tasks