我試圖用來vuex存盤一個在子組件中顯示/隱藏模式的值。子組件由其父組件在串列中多次呈現。但是，模態總是顯示串列中的最后一項，我可以看到我從我的 vuex 狀態計算的模態值運行的次數與串列中元素的數量相同。
Vuex 狀態
export default function () {
return {
currentProduct: {},
allProducts: [],
editProductDialog: false
};
}
Vuex 突變
export const setEditProductDialog = (state, editProductDialog) => {
state.editProductDialog = editProductDialog
}
父組件：
<div>
<product
v-for="product in allProducts"
:key="product.id"
:product="product"
/>
</div>
子組件：
<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>
就像我說的，對話框總是顯示最后一個product組件，我可以看到計算部分中的列印陳述句運行的次數與allProducts.
渲染組件串列時如何正確使用 vuex 存盤模態狀態？
uj5u.com熱心網友回復：
嘗試設定 id，而不是布林值 true/false：
@click="runSetEditProductDialog(product.id)"
runSetEditProductDialog(id) {
this.setEditProductDialog(id)
},
并在您的計算屬性中進行比較：
return this.editProductDialog === this.product.id
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463580.html