将对象推入数组并使其不可变

Posted 2021-04-03

我对Vue / Java相当陌生，所以这可能是一个非常简单的答案。我有一个打开模式的组件，您可以在其中选择要添加到订单的产品。问题是，当我修改价格时，我重新打开了重置所有价格的模式。

如何修改pickProduct功能，以便在重新打开模态时更改仍然存在？

Codepen

new Vue({
  el: '#app',
  data: () => ({
    orderForm: {
      lines: []
    },
    defaultLine: {
      product: null,
      price: ''
    }
  }),
  methods: {
    pickProduct(product) {
      const emptyLine = Object.assign({}, this.defaultLine)
      const newProduct = Object.assign({}, product)
      Object.assign(emptyLine, newProduct)
      newProduct.product = newProduct.id

      // this.orderForm.lines.push(newProduct)
      this.orderForm.lines = [...this.orderForm.lines, newProduct]
    }
  }
})

答案

您在价格输入中使用:value，实际上并不会更改您正在编辑的对象的值。因此，这与不变性无关。要实际绑定对象的值，请使用v-model代替value。

因此更改此：

<input type="text" :value="item.price" />

to

<input type="text" v-model="item.price" />

CODEPEN