Tengo un componente de casilla de verificación en Vue:
<template> <div class="checkbox"> <input class="checkbox-input" name="input" type="checkbox" v-model="checkbox"> </div> </template> <script> export default { data(){ return { checkbox: false }; }, }; </script>Entonces, en el componente principal, quiero controlar estas casillas de verificación. Así que aquí está mi componente principal:
<div class="card"> <div class="card-header"> <CheckBox /> </div> <div class="card-body" v-for="item in cart" :key="item.product.id"> <div class="checkbox-area"> <CheckBox /> </div> </div>Por lo tanto, se puede agregar una casilla de verificación en el cuerpo de la tarjeta cuando el usuario hace clic para agregar. Entonces, si un usuario hace clic 3 veces, se agregan 3 casillas de verificación dentro del cuerpo de la tarjeta. Lo que estoy tratando de lograr es que, como puede ver en el encabezado de la tarjeta, hay otra casilla de verificación, y cuando se hace clic en esta casilla de verificación, quiero marcar todas las casillas de verificación dentro del cuerpo de la tarjeta, y cuando no está marcada en el encabezado de la tarjeta, yo quiero desmarcar todo dentro del cuerpo de la tarjeta.
Entonces, ¿tienes alguna idea de cómo lograr esto?
Gracias...
Puedes probar así:
Vue.component('checkbox', { template: ` <div class="checkbox"> <input class="checkbox-input" name="input" type="checkbox" @change="getCheck" v-model="value"> </div> `, props: { checked: { type: Boolean, default: false } }, data(){ return { value: this.checked }; }, methods: { getCheck() { this.$emit("set-checked", this.value) } }, watch: { checked(){ this.value = this.checked } } }) new Vue({ el: '#demo', data(){ return { all: false, cart: [ {id: 1, check: false}, {id: 2, check: false}, {id: 3, check: true}, {id: 4, check: false} ] }; }, watch: { cart() { this.cart.find(c => c.check === false) ? this.all = false : this.all = true } }, methods: { checkAll(val) { this.all = val this.cart = this.cart.map(c => { c.check = val return c }) }, checkItem(id) { this.cart = this.cart.map(c => { if(c.id === id) { c.check = !c.check } return c }) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="card"> <div class="card-header"> <p>All</p> <checkbox :checked="all" @set-checked="checkAll" /> </div> <br/> <div class="card-body" v-for="item in cart" :key="item.id"> <div class="checkbox-area"> <checkbox :checked="item.check" @set-checked="checkItem(item.id)" /> </div> </div> </div> </div>En primer lugar, debe agregar algunos accesorios a su Componente. que un reloj para emitir una sincronización cuando cambia el valor de la casilla de verificación.
<template> <div class="checkbox"> <input class="checkbox-input" name="input" type="checkbox" v-model="value"> </div> </template> <script> export default { props: { checked: { type: Boolean, default: false } } data(){ return { value: this.checked }; }, watch: { value(){ this.$emit("update:checked", this.value) } } }; </script>en el carrito, debe estar atento a estos cambios y luego puede marcar / desmarcar todos los artículos.
<template> <div class="card"> <div class="card-header"> <CheckBox :checked.sync="global"/> </div> <div class="card-body" v-for="item in cart" :key="item.product.id"> <div class="checkbox-area"> <CheckBox :checked.sync="item"/> </div> </div> </div> </template> <script> export default { data(){ return { global: false, cart: [ false, false, false ] }; }, watch: { global(){ for (let i = 0; i < this.cart.length; i++) { this.chart[i] = this.global } } } }; </script>No he probado este código, pero debería funcionar...