Vue js v-for v-bind 不是唯一的

Question

我正在尝试创建一个表单，其中有一个 select 列表（从 API 中获取），用户可以从该列表中将项目添加到单独的数组中。新数组也通过 v-for 渲染并使用 v-model 编辑一些额外的数据。

例如，我有一个预先定义的 goods/services 列表，它将呈现到 select 选项块中。现在用户可以 select 这些产品之一并将它们添加到发票中。添加（推送到新阵列）后，用户必须能够进行一些额外的更改。

<select class="form-control" v-model="selectedServiceId">
    <option v-for="service in services" :value="service._id">{{service.name}}</option>
</select>

<button type="button" class="btn btn-primary" v-on:click="addService">Add</button>

添加服务方式：

addService() {
    for (var i = 0; i < this.services.length; i++) {
      if (this.services[i]._id == this.selectedServiceId) {
        this.services_goods.push(this.services[i])
        break;
      }
    }
  }

现在我想渲染我推入的列表：

<ul>
          <li v-for="(item, key) in services_goods">
            <span>{{item.name}}</span>
            <label for="itemPrice">Price €
              <input id="itemPrice" v-model="item.price">
            </label>
            <label for="itemQty">Quantity
              <input type="number" min="1" id="itemQty" v-model="item.quantity">
            </label>
            <div>
              <button type="button" v-on:click="removeService(item._id)">X</button>
            </div>
          </li>
        </ul>

一切都很好，直到我两次添加相同的项目并尝试修改其中一个的价格 - 它改变了两个的价格。

Answer 1

它更改两者价格的原因是它们是同一对象。将对象插入数组时，数组中的值是对该对象的引用。您有两个对同一对象的引用。

您插入到数组中的每个对象都应该是新创建的，其内容是从所选项目中复制的。

new Vue({
  el: '#app',
  data: {
    selectedServiceId: null,
    services: [{
        _id: 1,
        price: 1,
        quantity: 1,
        name: 'First'
      },
      {
        _id: 2,
        price: 2,
        quantity: 2,
        name: 'Second'
      }
    ],
    services_goods: []
  },
  methods: {
    addService() {
      const foundGood = this.services.find((s) => s._id == this.selectedServiceId);

      // Object.assign copies an object's contents
      this.services_goods.push(Object.assign({}, foundGood));
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
  <select class="form-control" v-model="selectedServiceId">
    <option v-for="service in services" :value="service._id">{{service.name}}</option>
</select>

  <button type="button" class="btn btn-primary" v-on:click="addService">Add</button>
  <ul>
    <li v-for="(item, key) in services_goods">
      <span>{{item.name}}</span>
      <label for="itemPrice">Price €
              <input id="itemPrice" v-model="item.price">
            </label>
      <label for="itemQty">Quantity
              <input type="number" min="1" id="itemQty" v-model="item.quantity">
            </label>
      <div>
        <button type="button" v-on:click="removeService(item._id)">X</button>
      </div>
    </li>
  </ul>
</div>

Vue js v-for v-bind 不是唯一的

Vue js v-for v-bind not unique

vue.js

v-for