How to do conditional rendering in Vue
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.
