So führen Sie bedingtes Rendering in Vue durch

Question

Ich entwickle eine App, mit der sich Aufgaben erstellen und in Listen zusammenfassen lassen, um sie effizient nachzuverfolgen. Ich habe eine Liste und Aufgaben innerhalb der Liste erstellt.

Ich versuche, alle Aufgaben, die zu einer Liste gehören, innerhalb einer Liste darzustellen. Wenn ich jedoch den Vue-Code dafür schreibe, stoße ich auf ein Problem. Anstatt Aufgaben zu rendern, die nur zu dieser Liste gehören, generiert mein Code alle Aufgaben innerhalb der Datenbank. Kann mir jemand helfen, den richtigen Weg zu finden, um nur Aufgaben zu rendern, die zu einer bestimmten Liste gehören?

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>

Ich erhalte die Daten im Dashboard per JSON-Format. Beispieldaten könnten sein:

Mein Code sieht derzeit so aus:

Aber ich möchte, dass das Backlog GO- und Amaterasu-Aufgaben enthält. Heisenberg sollte nur GO-, Neu- und AK-Aufgaben usw. anzeigen. Das heißt, ich möchte nur, dass die Liste nur die Aufgaben rendert, die sie enthalten. Es wäre für mich sehr hilfreich, wenn mir jemand sagen könnte, wie ich es richtig rendern kann.

Answer 1

错误出现在这段代码

第一个 v-for 循环遍历您的每个项目（您已经在 div 上使用上面的 v-for 与 class="all__lists" 执行此操作以显示您的列表卡），第二个 v-for 循环遍历每个项目任务。

删除第一个 v-for，如下所示