javascript - 在vuetify中切换组件时如何检查所有复选框？

Question

我想在更改 v-switch 时检查复选框列表。我所拥有的是：

这是开关组件，如果 selectAll 为真，我想检查所有复选框：

  <v-switch style="padding-right:15px;" v-model="selectAll" @change="handleChanging">
                        </v-switch> 

这是列表，每个项目之前都有一个复选框：

  <v-list-item v-for="(item, index) in itemsEducators" :key="index">
      <v-list-item-action>
     <v-checkbox :key="item.title" :input-value="item.checked"> </v-checkbox>
             </v-list-item-action>
              <v-list-item-content>
               <v-list-item-title>{{ item.title }}</v-list-item-title>
                <v-list-item-subtitle>{{ item.institution }} </v-list-item-subtitle>
                   </v-list-item-content>
                    </v-list-item>

这里是js函数：

     methods: {
        handleChanging() {
            if (this.selectAll === true) {
     //here I want to check all checkboxes
            } else {
     //here to uncheck all
            }
        }

}

标签： javascriptvue.jsvuetify.js

Answer 1

你可以这样做：

handleChanging() {    
   if (this.selectAll === true) {
      this.itemsEducators.forEach(x => x.checked = true);
   } else {
      this.itemsEducators.forEach(x => x.checked = false);
   }
}