更新 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>

Answer 1

看起来像computed setters + .sync 的正确案例。

概念证明：

Vue.component('cart-product', {
  props: ['prod'],
  computed: {
    kg: {
      get() { return this.prod.kg || 0 },
      set(kg) { this.$emit('update:prod', { ...this.prod, kg }) }
    },
    gm: {
      get() { return this.prod.gm  || 0},
      set(gm) { this.$emit('update:prod', { ...this.prod, gm }) }
    },
    quantity() {
      return (+this.kg * 1e3 + (+this.gm)) / 1e3;
    },
  },
  template:`
  <div>
    <h2>{{prod.name}}</h2>
    <div>Kg: <input v-model="kg" type="number"></div>
    <div>Gm: <input v-model="gm" type="number"></div>
    Qty: {{ quantity }}
  </div>`
})

new Vue({
  el: '#app',
  data: () => ({
    products: [
      {name: 'Prod 1'},
      {name: 'Prod 2'}
    ]
  })
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<div id="app">
  <cart-product v-for="(product, key) in products"
                :key="key"
                :prod.sync="products[key]"></cart-product>
  
  <pre v-text="{products}"></pre>
</div>

如果您在实施时遇到问题，请在codesandbox.io 或类似网站上创建一个runnable mcve，我会看看。