[英]Update the input value ( v-model ) in vuejs
我正在嘗試更新產品單位 (KG) 的值,但我面臨的問題是,當我嘗試更新值時,在同一個組件中,它將反映在我的輸入框中,但在單擊添加到購物車后更新相同的值(如PC單元),它不會將更新后的值反映到購物車組件中。 那么誰能告訴我如何傳遞價值? 因此,當用戶返回產品組件並更新值時,它都會反映到購物車組件。
產品組件
<template>
<div>
<div v-if="prod.unit === '1 KG'">
<div class="column is-4 prod-set-unit">
<div><input type="number" placeholder="KG" v-model="prod.kg" /></div>
<div class="verticalLine"></div>
<div><input type="number" placeholder="GM" v-model="prod.gm" /></div>
</div>
</div>
<div class="columns">
<div class="column">
<button v-if="!isProdInCart(prod)" @click="addToCart(prod)" class="button is-medium is-info is-rounded">Add to cart</button>
<div v-else class="columns">
<div class="column is-6">
<b-numberinput v-if="isPC(prod.unit)" :value="getProdQtyInCart(prod)" @input="updateProductQty($event)" type="is-info" min="1" max="999"></b-numberinput>
<input readonly class="prod-price " v-if="isKG(prod.unit)" type="number" :value="productQty" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ProductTile from '../products/HomeProductTile';
export default {
name: 'productDetails',
components: {
ProductTile,
},
data() {
return {
basket: this.$root.basket,
prod: this.$user.setProdDetails,
};
},
method: {
updateProductQty(value) {
const storeId = this.$user.currentStoreId;
const cart = JSON.parse(JSON.stringify(this.basket[storeId] || {}));
let commonParams = { token: this.$user.token, prodId: this.prod.id, cartId: this.$user.cartId, userId: this.$user.user.id };
this.$http
.put(`/carts/${this.$user.cartId}/product/${this.prod.id}`, {
...commonParams,
qty: this.prod.unit === this.prod.PC ? value : this.productQty,
})
.then((res) => {
console.log('response', res);
this.prod.qty = value;
cart[this.prod.id] = this.prod;
this.$set(this.basket, storeId, cart);
this.$user.basket = this.basket;
console.log('Added. Basket =', this.basket);
});
},
computed: {
productQty: function() {
return (Number(this.prod.kg) * 1000 + Number(this.prod.gm)) / 1000;
},
},
}
},
}
</script>
ProductCart 組件
<template>
<div v-if="prod.unit === '1 KG'">
<div class="has-text-centered prod-set-unit" v-if="$route.path !== '/'">
<div><input class="has-text-grey input-style" type="number" placeholder="KG" :value="prod.kg" @input="productQty" /></div>
<div class="verticalLine"></div>
<div><input class="has-text-grey input-style" type="number" placeholder="GM" :value="prod.gm" @input="productQty" /></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'productCart',
props: {
prod: Object,
prodId: String,
},
data() {
return {
basket: this.$root.basket,
};
},
methods: {
/* updateProductQty logic ....*/
},
computed: {
productQty() {
return (Number(this.prod.kg) * 1000 + Number(this.prod.gm)) / 1000;
},
},
}
</script>
購物車組件
<template>
<div v-if="!isCartEmpty()" >
<div class="card" v-for="(prod, key) in this.$root.basket[this.$user.currentStoreId]" :key="key">
<CartProduct :prod="prod" :prodId="key" />
</div>
</div>
</template>
<script>
import CartProduct from '../components/cart/Product.vue';
export default {
name: 'cart',
components: {
CartProduct,
},
methods: {
isCartEmpty() {
const cart = JSON.parse(JSON.stringify(this.$root.basket[this.$user.currentStoreId] || {}));
console.log(Object.keys(cart).length);
if (Object.keys(cart).length === 0) {
return true;
}
return false;
},
},
created() {
this.$root.basket = this.$user.basket;
},
computed: {
cartSize() {
const cart = JSON.parse(JSON.stringify(this.$root.basket[this.$user.currentStoreId] || {}));
return Object.keys(cart).length;
},
},
watch: {
basket: {
deep: true,
handler: function () {
console.log('basket changed');
},
},
},
};
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.