How to do conditional rendering in Vue

Question

I'm developing an application that can be used to create tasks and put them into lists to track them efficiently. I have created a list and tasks within the list.

I'm trying to render all tasks that belong to a list within a list. However, when I write the vue code for this, I run into a problem. Instead of rendering tasks that only belong to that list, my code generates all tasks within the database. Can someone help me find the correct way to render only tasks that belong within a specific list?

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>

I receive the data in the dashboard via JSON format. Example data could be:

My code currently renders as follows:

But I want the backlog to contain GO and Amaterasu tasks, Heisenberg should only show GO, New and AK tasks etc. I.e. I only want the list to render only the tasks that contain it. It would be very helpful to me if someone could tell me how to render it correctly.

Answer 1

The error occurs in this code

The first v-for loops through each of your items (you already do this on a div using the v-for above with class="all__lists" to show your list card), the second v- A for loop iterates through each project task.

Remove the first v-for as shown below