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

【问题标题】：How to check all checkboxes when switch component in vuetify?在vuetify中切换组件时如何检查所有复选框？
【发布时间】：2021-09-15 09:11:22
【问题描述】：

我想在更改 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
            }
        }

}

【问题讨论】：

喜欢你的v-switch，每个v-checkbox 都有一个v-model。你只需要改变那里的初始值。
对不起，我没听懂，你能解释一下吗？
v-model 定义您的输入（任何类型）的存储位置，如果您想预定义某些内容，也可以定义。所以如果你想检查你的v-checkbox，只需更改它的v-model。

标签： javascript vue.js vuetify.js

【解决方案1】：

你可以这样做：

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

【讨论】：

【解决方案2】：

尝试如下：

new Vue({
  el: '#demo',
  data() {
    return {
      itemsEducators: [
        {title: 'title 1', checked: false, institution: '1'},
        {title: 'title 2', checked: false, institution: '1'},
        {title: 'title 3', checked: true, institution: '1'},
        {title: 'title 4', checked: false, institution: '1'},
      ],
      all: false
    }
  },
  methods: {
    handleChanging() {
      this.itemsEducators = this.itemsEducators.map(i => {
        i.checked = this.all
        return i
      })
    },
    setCheck() {
      this.itemsEducators.find(c => c.checked === false) ? this.all = false : this.all = true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="demo">
  <p>All</p>
  <input type="checkbox" style="padding-right:15px; margin-bottom: 2em;" v-model="all" @change="handleChanging" />
   <ul style="display: flex; list-style: none;">
  <li v-for="(item, index) in itemsEducators" :key="index" style="margin-right: 2em;">
    <input type="checkbox" :key="item.title" v-model="item.checked" @change="setCheck" />
    <p>{{ item.title }}</p>
  <li>
  </ul>
</div>

【讨论】：

不客气 :) 如果你觉得我的回答有用请点赞