Louvorg/liste-de-courses-www
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Router link and modal issue?

Browse Source
This commit is contained in:
aminecmi
2022-08-06 15:05:34 +02:00
parent 884877572b
commit 3039f3a415
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/Lists.vue
View File

@@ -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();