replace v-if with conditional rendering based on item-list

frontend/src/components/MainPage.vue

@@ -15,6 +15,7 @@ export default {
   data() {
     return {
       items: [],
+      completedItems: [],
       newItem: "",
       showAddModal: false,
       showDetailsModal: false,
@@ -33,12 +34,6 @@ export default {
     }
   },
   methods: {
-    asdItem() {
-      if (this.newItem.trim() !== "") {
-        this.items.push(this.newItem);
-        this.newItem = "";
-      }
-    },
     showDetails(item) {
       this.selectedItem = item;
       this.showDetailsModal = true;
@@ -52,7 +47,9 @@ export default {
       })
 
       if(response.status === 200) {
-        this.items = await response.json()
+        const items = await response.json()
+        this.items = items.filter(item => item.completed === false)
+        this.completedItems = items.filter(item => item.completed === true)
       }
     },
     async addTodo(){
@@ -123,15 +120,15 @@ export default {
               <b-tab title="Active ToDos">
                 <ul class="list-group mt-3 h-75" v-if="items.length > 0">
                   <li v-for="(item, index) in items" :key="index" class="list-group-item" @click="showDetails(item)">
-                    <CustomListElement v-if="!item.completed" :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+                    <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
                   </li>
                 </ul>
                 <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
               </b-tab>
               <b-tab title="Completed ToDos">
-                <ul class="list-group mt-3 h-75" v-if="items.length > 0">
-                  <li v-for="(item, index) in items" :key="index" class="list-group-item" @click="showDetails(item)">
-                    <CustomListElement v-if="item.completed" :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+                <ul class="list-group mt-3 h-75" v-if="completedItems.length > 0">
+                  <li v-for="(item, index) in completedItems" :key="index" class="list-group-item" @click="showDetails(item)">
+                    <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
                   </li>
                 </ul>
                 <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>