Dynamic V-Model with a V-For

Question

EDIT I have recreated my issue here

My issue is how can I bind dynamically with the right index

---

OLD CODE CLICK ON THE CODEPEN LINK ABOVE OLD CODE CLICK ON THE CODEPEN LINK ABOVE

<template>
  <div>
    <ul class="filters">
      <form action>
        <li v-for="(filter , index ) in filters " :key="filter.id">
          {{index}}
          <label for="filters">{{filter.title }} ({{filter.count}})</label>
          <input
            type="text"
            name="filters"
            :id="index+filter.title"
            :placeholder="filter.title"
            v-model="choosenFilters[0][index]"
          />
          <input
            type="checkbox"
            name="filters"
            :id="filter.title"
            :value="filter.title"
            v-model="choosenFilters[0][index]"
          />
        </li>
      </form>
    </ul>
  </div>
</template>

OLD CODE CLICK ON THE CODEPEN LINK ABOVE OLD CODE CLICK ON THE CODEPEN LINK ABOVE

<script>
export default {
  name: "FilterConfigurationPanel",
  data() {
    return {
      checked: false,
      choosenFilters:{
        name:'', 
        label:'', 
        checked:'', 
      }, 
      shown: null,
    };
  }, 

  created() {
    this.$store.dispatch("filtersAPi");
  },

  computed: {
    ...mapState(["filters"]),
  }, 
};
</script>

Answer 1

Instead of having 2 different arrays, you can use the same persons object array to include the new email ID. Add 2 new properties for each object in persons array called newEmail and checked. Then you can use the same object to display

<li v-for="(person, index ) in persons" :key="person.id">
  {{person.email}}

  <input type="text" name="filters" v-model="person.newEmail" />
  <input type="checkbox" name="filters" v-model="person.checked" />

This way you can keep track of id as well as oldEmail