在 vuejs 中更新输入值 ( v-model )

Question

我正在尝试更新产品单位 (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>