From 3039f3a415c5c8e70ba09b6920e87478fb56409d Mon Sep 17 00:00:00 2001
From: aminecmi <aminecmi@gmail.com>
Date: Sat, 6 Aug 2022 15:05:34 +0200
Subject: [PATCH] Router link and modal issue?

---
 src/views/Lists.vue | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/views/Lists.vue b/src/views/Lists.vue
index aaf7991..bf55d3f 100644
--- a/src/views/Lists.vue
+++ b/src/views/Lists.vue
@@ -11,7 +11,7 @@
       </div>
 
       <div class="level-right">
-        <button class="button is-large" v-on:click="toggleModal">
+        <button class="button is-large" v-on:click="newItem">
           <span class="icon is-medium">
             <ion-icon name="add-outline"></ion-icon>
           </span>
@@ -20,18 +20,20 @@
     </nav>
     <div class="columns">
       <div class="column is-one-quarter"  v-for="item in lists" :key="item.id">
-        <div class="card">
-          <div class="card-content">
-            <p class="title">
-              {{item.name}}
-            </p>
+        <router-link :to="{ name: 'List', params: { id: item.id }}" custom v-slot="{ navigate }">
+          <div class="card" @click="navigate">
+            <div class="card-content">
+              <p class="title">
+                {{item.name}}
+              </p>
+            </div>
+            <footer class="card-footer">
+              <router-link class="card-footer-item" :to="{ name: 'List', params: { id: item.id }}">Select</router-link>
+              <a href="#" class="card-footer-item" v-on:click.prevent="selectItem(item)">Edit</a>
+              <a href="#" class="card-footer-item" v-on:click.prevent="deleteItem(item)">Delete</a>
+            </footer>
           </div>
-          <footer class="card-footer">
-            <router-link class="card-footer-item" :to="{ name: 'List', params: { id: item.id }}">Select</router-link>
-            <a href="#" class="card-footer-item" v-on:click="selectItem(item)">Edit</a>
-            <a href="#" class="card-footer-item" v-on:click="deleteItem(item)">Delete</a>
-          </footer>
-        </div>
+        </router-link>
       </div>
     </div>
   </div>
@@ -81,6 +83,10 @@ export default {
     toggleModal: function () {
       this.addModalShown = !this.addModalShown;
     },
+    newItem: function () {
+      this.selectedItem = null;
+      this.toggleModal();
+    },
     selectItem: function (item) {
       this.selectedItem = item;
       this.toggleModal();