在v-for中使用v-model

Question

I have the following code:

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

However the data binding refers to all elements. If I change one input field the others are also changed. But in the name prop of my input element I get the right keys counting from 0 to the last.

---

How can I achieve that only the corresponding data changes?

This is how my data structure looks like in 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:""

Here is a fiddle to better reflect my problem: Fiddle

Answer 1

According to your fiddle you are pushing the same object onto the array every time you add one. So you have multiple copies of the same object instead of new independent elements.

This is similar to Vue's requirement that data be a function in components, so that instances of the component don't share the same data object. You can solve your problem the same way: make companionBlueprint a method:

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

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

I've added an id to use as the :key in the v-for . Updated fiddle