我正在嘗試將一個物件推送到 vuetify 中的物件串列中。我正在使用 Vue 3。
這是我的html代碼：
<a to="#" data-toggle="tooltip" data-placement="top" title="Add to cart"
@click.stop.prevent="handleAddToCart(product)">
<v-icon class="icon-bag2">mdi-medical-bag</v-icon>
</a>
注意：我使用了 stop.prevent ，因為圖示位于可點擊的 div 內。
這是我在點擊事件方法中嘗試過的：在資料中宣告：productList = []
handleAddToCart(product) {
this.productList.push(product)
console.log('product list', this.productList)
this.$cookies.set('cart', JSON.stringify(this.productList))
}
我想將此陣列保存在 cookie 中，但它會不斷替換物件而不是一個接一個地推送物件。
uj5u.com熱心網友回復：
data() {
return {
productList : []
}
}
...
handleAddToCart(product) {
this.productList.push(product)
console.log('product list', productList)
this.$cookies.set('cart', JSON.stringify(productList))
}
uj5u.com熱心網友回復：
發生這種情況是因為每次單擊 create a new arraylet productList = []時，都需要將陣列參考保留在 data 屬性中。
export default {
data: {
return {
productList: []
}
},
methods: {
handleAddToCart(product) {
this.productList = [...this.productList, product]
console.log('product list', this.productList)
this.$cookies.set('cart', JSON.stringify(this.productList))
}
}
}
uj5u.com熱心網友回復：
看起來你productList是一個代理物件，你可以從這個代理中獲取目標陣列，然后將新產品推入其中。
你可以試試這個：
handleAddToCart(product) {
const proxyArr = new Proxy(this.productList, {
get(target, prop, receiver) {
return target[prop];
}
});
this.productList = [...proxyArr];
this.productList.push(product);
this.$cookies.set('cart', JSON.stringify(this.productList))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526097.html
標籤：javascriptVue.jsVuetify.jsVuejs3
上一篇：未定義的mixinsass