[Vuejs]-Vue bind multiple v-models to elements in v-for loop

by

0👍

You can change your toggle to an array:

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.")
            });
          } 
        }
    }
}

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

Leave a comment