Question

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

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

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <defs>
        <style>
          .cls-1{fill:#d9d9d9;}.cls-2{fill:#fff;}.cls-3{fill:#222221;}
        </style>
      </defs>
      <path class="cls-1" d="M420.94,366.76a62.55,62.55,0,1,0-62.54-62.55,62.55,62.55,0,0,0,62.54,62.55" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="36.49 32.43 20.89 48.48 20.89 88.25 62.2 88.25 62.2 32.16 36.49 32.43" />
      <path class="cls-3" d="M394.31,271.33l-17.16,17.16v38.72a5.23,5.23,0,0,0,5.23,5.23h40.51V271.33Zm-.16,5.65v9a2.33,2.33,0,0,1-2.33,2.33h-9ZM419,328.57H382.38a1.37,1.37,0,0,1-1.36-1.36V290.27h10.8a4.27,4.27,0,0,0,4.26-4.27V275.21H419Z" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="88.3 32.43 103.9 48.48 103.9 88.25 62.59 88.25 62.59 32.16 88.3 32.43" />
      <path class="cls-3" d="M447.58,271.33H419v61.11h40.51a5.23,5.23,0,0,0,5.23-5.23V288.49Zm.16,5.65,11.35,11.35h-9a2.33,2.33,0,0,1-2.33-2.33Zm11.77,51.59H422.88V275.21h22.93V286a4.27,4.27,0,0,0,4.26,4.27h10.79v36.94a1.35,1.35,0,0,1-1.35,1.36" transform="translate(-358.4 -241.67)" />
      <rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />
    </svg>

单击上方的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>

Answer 1

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

具有V-For的动态V模型

1 个答案: