Question

我有以下代码：

<div v-for="(companion, key) in planForm.companions">        
     <div class="field">
          <label class="label">First Name</label>
          <div class="input-space">
              <input :name="'companion_first_name[' + key + ']'" type="text" v-model="companion.first_name">
          </div>
     </div>

     <div class="field">
        <label class="label">Last Name</label>
        <div class="input-space">
              <input :name="'companion_last_name[' + key + ']'" type="text" v-model="companion.last_name">
        </div>
     </div>
</div>

然而，数据绑定是指所有元素。如果我更改了一个输入字段，则其他字段也会更改。但是在我的输入元素的name道具中，我得到了从0到最后的正确键。

如何才能实现相应的数据更改？

这就是我的数据结构在Chrome Vue Panel中的样子：

companions:Array[3]
 0:Object
  first_name:"Tester"
  last_name:""
 1:Object
  first_name:"Tester"
  last_name:""
 2:Object
  first_name:"Tester"
  last_name:""

这是一个更好地反映我的问题的小提琴：Fiddle

Answer 1

根据your fiddle，每次添加一个对象时，都会将同一个对象推送到数组中。因此，您拥有同一对象的多个副本，而不是新的独立元素。

这与Vue的要求类似，data是组件中的一个功能，因此组件的实例不共享相同的数据对象。您可以用同样的方法解决问题：make companionBlueprint方法：

  methods: {
    companionBlueprint() {
      return {
        id: Math.random(),
        first_name: '',
        last_name: ''
      };
    },
    addCompanion() {
      const vm = this;
      const companionBlueprint = vm.companionBlueprint;

      vm.planForm.companions.push(companionBlueprint());
    }
  }

我添加了id作为:key中的v-for。 Updated fiddle

在v-for中使用v-model

1 个答案: