时间戳

首页 > 解决方案 > 带有 V-For 的动态 V 模型

forms - 带有 V-For 的动态 V 模型

问题描述

编辑 我在这里重新创建了我的问题

我的问题是如何使用正确的索引动态绑定

旧代码单击上方的 CODEPEN 链接 旧代码单击上方的 CODEPEN 链接

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

旧代码单击上方的 CODEPEN 链接 旧代码单击上方的 CODEPEN 链接

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

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

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

标签： formsvue.jsv-forv-model

解决方案

您可以使用相同的persons对象数组来包含新的电子邮件 ID，而不是使用 2 个不同的数组。persons为名为newEmailand的数组中的每个对象添加 2 个新属性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

推荐阅读