I am using Vue2 and Vuetify2.
I have some checkboxes in Vuetify created using a v-for loop. All checkboxes are inside a dialog component.
The Procedure-
- Before opening the dialog, I make an API request and fetch the items. Then, I open the dialog and select the checkboxes.
- Before closing the dialog, I empty the
selectedarray, so I will have no items selected on opening the dialog again.
The issue-
- When I open the dialog a second time, all checkboxes are already selected even though the variable
selectedis set to an empty array[]. - Then if I try to unselect any item, all are unselecting together and after that only one at a time is selectable.
Here is the working demo of this issue-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<v-btn dark @click.stop="onBeforeOpen">
Open Dialog
</v-btn>
<div class="mt-5"></div>
<div class="mt-5">Selected items - </div>
<v-dialog v-model="dialog" persistent>
<v-card class="pa-5">
<div><b>Select items and close dialog.</b></div>
<v-checkbox
v-for="item in items"
:key="item.id"
v-model="selected"
:value="item"
>
<template v-slot:label>
<v-card flat>
<div></div>
<div></div>
</v-card>
</template>
</v-checkbox>
<div align="center">
<v-btn color="error" small @click="onBeforeClose"
>Close Dialog</v-btn
>
</div>
</v-card>
</v-dialog>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialog: false,
selected: [],
items: null,
msg: null,
}
},
methods: {
onBeforeOpen() {
this.msg = "Fetching items from API....";
$.ajax("https://gorest.co.in/public/v2/users", {
success: (data, status, xhr) => {
this.items = data.splice(0, 2);
this.msg = null;
this.dialog = true
},
});
},
onBeforeClose() {
this.selected = [];
this.dialog = false;
}
}
})
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire