如何在Vue中進行條件渲染

Question

我正在開發一個應用程序，可用於創建任務並將它們放入列表中以有效地追蹤它們。我已經創建了清單和清單中的任務。

我正在嘗試渲染屬於清單內清單的所有任務。但是，當我為此編寫 vue 程式碼時，我遇到了問題。我的程式碼不是渲染僅屬於該清單的任務，而是產生資料庫內的所有任務。有人可以幫助我找到僅渲染屬於特定清單內的任務的正確方法嗎？

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>

我透過 JSON 格式接收儀表板中的資料。範例資料可以是：

我的程式碼目前呈現如下：

但我希望待辦事項清單包含 GO 和 Amaterasu 任務，海森堡應該只顯示 GO、New 和 AK 任務等。即，我只希望清單呈現僅包含它的任務。 如果有人能告訴我如何正確渲染它，這對我來說非常有用。

Answer 1

錯誤出現在這段程式碼

第一個v-for 循環遍歷您的每個項目（您已經在div 上使用上面的v-for 與class="all__lists" 執行此操作以顯示您的清單卡），第二個v- for 迴圈遍歷每個專案任務。

刪除第一個 v-for，如下所示