[Vuejs]-Using v-model in v-for

by

2👍

✅

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

👤Roy J

Leave a comment