Vue.js 将对象推送到数组将数组中的每个元素更改为相同

Question

我正在构建一个 Vue.js 应用程序，它允许用户制作和查看产品提要。

我有一个父元素NewFeed，它允许用户为其提要命名，然后允许用户将产品推送到此提要中。 子元素NewProduct 允许用户为产品输入数据，然后推入父元素的products 数组。我注意到每次将新产品推入数组时，数组中的每个元素都会更改为新元素的值。

如何更改此设置以使元素保持最初输入的状态？

NewFeed（父元素）：

Vue.component('NewFeed', {
  data: function() {
    return {
      newFeed: {
        name: "",
        products: []
      },
    }
  },
  methods: {
    addProduct: function(p) {
      p.id = this.pushedProducts;
      this.newFeed.products.push(p);
    }
  },
 template: `
    <div class="">
      <label for='feedNameInput'/>Feed Name: </label>
      <input id='feedNameInput' v-bind:value='newFeed.name' v-on:input='newFeed.name = $event.target.value'/> <br>
      <ViewProduct v-for='product in newFeed.products' :key='product.id'></ViewProduct>
      <NewProduct v-on:pushProduct='addProduct($event)'></NewProduct>
      <button v-on:click='pushNewFeed'>Add Feed</button>
    </div>
`});

新产品（子元素）

Vue.component('NewProduct', {
  data: function() {
    return {
      newProduct: { id: 0 }
    }
  },
  methods: {
    addProduct: function() {
       this.$emit('pushProduct', this.newProduct);
       this.newProduct.id++;
    }
  },
  template: `
    <div class='newProduct'>
      <label for='productNameInput'/>Product Name: </label>
      <input id='productNameInput' v-bind:value='newProduct.name' v-on:input='newProduct.name = $event.target.value'/> <br>

      <label for='productOriginalPriceInput'>Original Price: </label>
      <input id='productOriginalPriceInput' v-bind:value='newProduct.originalPrice' v-on:input='newProduct.originalPrice = $event.target.value'/><br>

      <label for='productNewPrice'>New Price: </label>
      <input id='productNewPrice' v-bind:value='newProduct.newPrice' v-on:input='newProduct.newPrice = $event.target.value'/><br>

      <label for='productDiscountAmount'>Discount Amount: </label>
      <input id='productDiscountAmount' v-bind:value='newProduct.discountAmount' v-on:input='newProduct.discountAmount = $event.target.value'/><br>

      <label for="productImage">Upload Image: </label>
      <input type='file' accept='image/*' id='productImage' v-bind:file='newProduct.imageFile' v-on:change='newProduct.imageFile = $event.target.files[0];'/><br><br><br>

      <button v-on:click="addProduct">Add Product</button>
    </div>
`});

Answer 1

这是因为子组件每次都发出相同的对象引用（JavaScript 对象通过引用传递）。所以所有发射的对象都是同一个对象。您必须每次都创建一个全新的对象。也许最简单的方法是在发出后立即重置子对象：

addProduct: function() {
   this.$emit('pushProduct', this.newProduct);
   const id = this.newProduct.id + 1;
   this.newProduct = { id }
}