Javascript 更新vuejs中的输入值（v型）

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

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

添加到购物车
从“../products/HomeProductTile”导入ProductTile；
导出默认值{
名称：“productDetails”，
组成部分：{
产品瓷砖，
},
数据（）{
返回{
篮子：这个。$root.basket，
prod:this.$user.setProdDetails，
};
},
方法：{
updateProductQty（值）{
const storeId=此。$user.currentStoreId；
const cart=JSON.parse（JSON.stringify（this.basket[storeId]|{}））；
让commonParams={token:this.$user.token，prodId:this.prod.id，cartId:this.$user.cartId，userId:this.$user.user.id}；
这是$http
.put（`/carts/${this.$user.cartId}/product/${this.prod.id}`{
…公共参数，
数量：this.prod.unit==this.prod.PC？值：this.productQty，
})
。然后（（res）=>{
console.log（'response'，res）；
此.prod.qty=值；
购物车[this.prod.id]=this.prod；
此.$set（此.basket、storeId、cart）；
this.$user.basket=this.basket；
log（'Added.Basket='，this.Basket'）；
});
},
计算：{
productQty:函数（）{
退货（编号（此.prod.kg）*1000+编号（此.prod.gm））/1000；
},
},
}
},
}

ProductCart组件

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

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

导出默认值{
名称：“productCart”，
道具：{
prod:对象，
prodId:String，
},
数据（）{
返回{
篮子：这个。$root.basket，
};
},
方法：{
/*updateProductQty逻辑*/
},
计算：{
产品数量（）{
退货（编号（此.prod.kg）*1000+编号（此.prod.gm））/1000；
},
},
}

购物车组件

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

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

从“../components/cart/Product.vue”导入CartProduct；
导出默认值{
名称：'购物车'，
组成部分：{
CartProduct，
},
方法：{
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）{
返回true；
}
返回false；
},
},
创建（）{
this.$root.basket=this.$user.basket；
},
计算：{
cartSize（）{
const cart=JSON.parse（JSON.stringify（this.$root.basket[this.$user.currentStoreId]| |{}）；
返回对象。键（购物车）。长度；
},
},
观察：{
篮子：{
深：是的，
处理程序：函数（）{
console.log（'basket changed'）；
},
},
},
};

看起来是+

概念证明：

Vue.component（'cart-product'{
道具：['prod']，
计算：{
千克：{
get（）{返回this.prod.kg | | 0}，
set（kg）{this.$emit（'update:prod'，{…this.prod，kg}）}
},
总经理：{
get（）{返回this.prod.gm | | 0}，
set（gm）{this.$emit（'update:prod'，{…this.prod，gm}）}
},
数量（）{
返回（+this.kg*1e3+（+this.gm））/1e3；
},
},
模板：`
{{prod.name}
公斤：
总经理：
数量：{{quantity}
`
})
新Vue({
el:“#应用程序”，
数据：（）=>({
产品：[
{name:'prod1'}，
{name:'Prod 2'}
]
})
})

我看不到

prod

作为道具传递，设置为数据变量，或从存储调用…它已经添加，prod传递到道具中@杰里米肯尼。我刚刚更新了我的帖子。你在哪里声明了

addToCart

方法？谢谢你的回复，我已经在你提到的实际应用程序中注意到了以上几点。我忘了在帖子中添加一些东西来简化它@但问题是我如何更新我的输入值，以便它反映在我的父母（如果更新孩子）中，因为我无法直接更新道具。@swati可能会有所帮助。您想使用setter+getter computed来修改父道具。