Vue 将多个 v-model 绑定到 v-for 循环中的元素

Question

我有一个创建部分的 v-for 循环，所有部分都有一个设置为 ON 的开关组件。它设置为 on，因为它是该组的一部分。这个想法是，当一个人切换到 OFF 时，它将进行 API 调用以设置新状态并从组中删除。

我遇到的麻烦是，现在我正在将开关与 v-model 和计算属性绑定，并且当构建这些部分时，它们连接到 SAME 属性。因此，如果一个人被切换到关闭状态，他们都会这样做。我不知道如何将它们分开，这样当点击一个时，它只会影响那个。我还需要与单击以进行 API 调用的开关关联的数据。 PS，开关元素上的点击方法不起作用。

HTML

 <div class="col-md-6 col-sm-12" v-for="person in people"> 
     <switcher size="lg" color="green" open-name="ON" close-name="OFF" v-model="toggle"></switcher> 
</div>

VUE

computed: {
    people() { return this.$store.getters.peopleMonitoring },
    toggle: {
        get() {
          return true;
        },
        set() {
            let dto = {
              reportToken: this.report.reportToken,
              version: this.report.version
            }
            this.$store.dispatch('TOGGLE_MONITORING', dto).then(response => {
            }, error => {
              console.log("Failed.")
            });
          } 
        }
    }
}

Answer 1

您可以将toggle 更改为数组：

computed: {
    people() { return this.$store.getters.peopleMonitoring },
    toggle: {
        get() {
          return Array(this.people.length).fill(true);
        },
        set() {
            let dto = {
              reportToken: this.report.reportToken,
              version: this.report.version
            }
            this.$store.dispatch('TOGGLE_MONITORING', dto).then(response => {
            }, error => {
              console.log("Failed.")
            });
          } 
        }
    }
}

还有你的 HTML：

<div class="col-md-6 col-sm-12" v-for="(person, index) in people"> 
  <switcher size="lg" color="green" open-name="ON" close-name="OFF" v-model="toggle[index]"></switcher> 
</div>