Dynami c V-модель с V-For

Question

РЕДАКТИРОВАТЬ Я воссоздал свою проблему здесь

Моя проблема заключается в том, как я могу динамически связываться с правильным индексом

---

СТАРЫЙ КОД НА КОДЕВОЙ ССЫЛКЕ НАД СТАРЫМ КОДОМ НА КОДЕКСНОЙ ССЫЛКЕ ВЫШЕ

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

СТАРЫЙ КОД НА КОДЕВОЙ ССЫЛКЕ НА СТАРОМ КОДЕКЛЕ НАЖИМАЮТ НА СТАРТУЮ ССЫЛКУ НАД

<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

Вместо двух разных массивов вы можете использовать один и тот же массив объектов persons для включения нового идентификатора электронной почты. Добавьте 2 новых свойства для каждого объекта в массиве persons с именами newEmail и checked. Затем вы можете использовать тот же объект для отображения

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

Таким образом, вы можете отслеживать id, а также oldEmail