I am attempting to utilize vuex to maintain a value that controls the visibility of a modal in a child component. The parent component renders the child component multiple times in a list, but the modal consistently displays only the last item in the list. Upon inspection, I noticed that my computed modal value from the vuex state is being executed the same number of times as there are elements in the list.
Vuex state
export default function () {
return {
currentProduct: {},
allProducts: [],
editProductDialog: false
};
}
Vuex mutations
export const setEditProductDialog = (state, editProductDialog) => {
state.editProductDialog = editProductDialog
}
Parent component:
<div>
<product
v-for="product in allProducts"
:key="product.id"
:product="product"
/>
</div>
Child component:
<template>
<div class="row justify-start">
<div class="col-6">
<q-item clickable v-ripple @click="runSetEditProductDialog">
<q-item-section avatar>
<q-icon name="chevron_right" />
</q-item-section>
<q-item-section class="text-body1">{{ name }}</q-item-section>
</q-item>
</div>
<q-dialog v-model="editDialog" no-backdrop-dismiss>
...
...
</q-dialog>
</template>
...
<script>
export default {
name: "Product",
props: ["product"],
data: () => ({
}),
methods: {
...mapMutations({
setEditProductDialog: "product/setEditProductDialog"
}),
runSetEditProductDialog() {
this.setEditProductDialog(true)
},
},
computed: {
...mapState("product", ["editProductDialog"]),
editDialog: {
get() {
console.log("in get")
return this.editProductDialog;
},
set(value) {
console.log("in set")
this.setEditProductDialog(value);
},
},
},
};
</script>
As mentioned earlier, the dialog consistently displays the last product component. Furthermore, the print statements in my computed section confirm that they are running the same number of times as there are elements in allProducts.
How can I effectively use vuex to manage modal state when displaying a list of components?