Vuejs как сделать кнопку Выбрать все в checkbox?

Question

Всем Здравствуйте. Возник такой вопрос. Есть массив checkboх, при клике на который он выбирается и я могу выбрать сразу несколько значений со страницы. Это все работает, хотелось бы добавить кнопку Выбрать все, чтобы не нажимать на каждый checkbox Код

new Vue({
    el: '#vue',
    data: {
            checkedNames: [],
          }

});

 <input type="checkbox" :value="item.id" id="usr" v-model="checkedNames">

Answer 1

Поиграться sfc.vuejs.org

<script setup>
import { ref } from 'vue'

const input = ['Jack','John','Mike']
const names = ref([])
const click = (bool) => names.value = bool ? [...input] : []
</script>

<template>
  <div>Checked names: {{names}}</div>
  <template v-for="(_, i) in input">
    <input type="checkbox" :value="input[i]" :id="input[i]" v-model="names">
    <label :for="input[i]">{{input[i]}}</label>
  </template>
    <br>
  <button @click="click(true)">Выбрать все</button>
  <button @click="click(false)">Ничего не выбрать</button>
</template>

БЛОГ НА HUSL

Vuejs как сделать кнопку Выбрать все в checkbox?

Ответы (1 шт):