Vue条件渲染问题：如何在列表中仅渲染所属任务？

我正在开发一款任务追踪App，支持创建任务并归类到列表中，目前已完成列表和任务的创建功能，但在列表内渲染所属任务时出现问题：代码会渲染数据库中的所有任务，而非仅当前列表的任务。期望实现Todo列表仅显示GO、Amaterasu任务，Heisenberg列表仅显示GO、New、AK任务，即每个列表只渲染自身包含的任务。

现有代码（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数据结构如下（每个列表项包含列表信息和对应任务数组）：

[
  [
    { "list_id": 1, "list_name": "Todo", "no_of_tasks": 2, "no_completed": 0, "len_list": 2 },
    [
      { "task_id": 1, "title": "GO", "list_id": 1 },
      { "task_id": 2, "title": "Amaterasu", "list_id": 1 }
    ]
  ],
  [
    { "list_id": 2, "list_name": "Heisenberg", "no_of_tasks": 3, "no_completed": 0, "len_list": 2 },
    [
      { "task_id": 3, "title": "GO", "list_id": 2 },
      { "task_id": 4, "title": "New", "list_id": 2 },
      { "task_id": 5, "title": "AK", "list_id": 2 }
    ]
  ]
]

当前问题 #

现有代码中，在has_tasks区块内又循环了整个items数组，导致每个列表都会遍历所有列表的任务；同时v-if写法存在语法错误（多了冒号、错误使用插值表达式），最终所有任务都被渲染，无法实现列表与任务的对应。

修复方案 #

1. 修正任务循环逻辑 #

在每个列表的has_tasks区块内，直接循环当前列表对应的任务数组（即item[1]），无需再遍历整个items：

<div class="has_tasks" v-else>
  <h4>Here are your tasks</h4>
  <!-- 直接循环当前列表的任务数组 item[1] -->
  <div class="tasks" v-for="(task, index1) in item[1]" :key="index1">
    <div class="filtered__tasks">
      <!-- 渲染任务内容，比如任务标题 -->
      {{ task.title }}
    </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>

2. 可选：添加任务归属判断 #

如果接口返回的任务数组中可能混入其他列表的任务，可在循环时添加判断：

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

3. 修正语法错误 #

原代码中v-if:="{{ item[0].list_id }} == {{ task.list_id }}"的错误：

• 去掉v-if后的冒号
• 无需插值表达式，直接写JS表达式：v-if="item[0].list_id === task.list_id"

最终效果 #

每个列表只会渲染自身对应的任务数组中的任务，实现Todo列表显示GO、Amaterasu，Heisenberg列表显示GO、New、AK的需求。

内容的提问来源于stack exchange，提问作者MAHEEDHAR A