Question

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

我遇到的麻烦就是现在我将交换机与v-model和计算属性绑定在一起，当这些部分构建完成后，它们就连接到了SAME属性。因此，如果一个人切换到OFF，他们都会这样做。我不确定如何将它们分开，以便在单击它时它只影响那个。我还需要与单击的交换机关联的数据以进行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>

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

1 个答案: