¿Cómo se puede vincular la entrada del tipo de casilla de verificación presente en child component al v-model en el parent component ?
Forma de componente requerida -
Padre-
<button v-if="checkedNames">Confirm</button> //show this button if 1 checkbox is selected <div v-model="checkedNames" > <child-component v-for="person in collection" :key="person.id" :person="person"><child-component> </div> new Vue({ el: '...', data: { checkedNames: [], collection: [ {id: 1, name: 'Jack', items:[{id:100,name:"Pen",quantity:5}]}, {id: 2, name: 'John', items:[{id:200,name:"Pen",quantity:10}, {id:201,name:"Paper",quantity:100,}]}, {id: 3, name: 'Mike', items:[{id:300,name:"Pen",quantity:20}]}, ] } })Niño-
<div v-for="(item, i) in person.items" :key="i"> <input type="checkbox" :id="item.id" :value="item.name" > <label :for="item.id">{{item.name}}</label> <input type="number" :id="i" :value="item.quantity" > <label :for="i">{{item.quantity}}</label> </div> new Vue({ el: '...', props:{person:Object} })¿Cómo enviar la identificación del artículo, la cantidad y la identificación principal si la casilla de verificación está seleccionada al padre?
new Vue() se usa solo para crear una instancia de Vue de nivel superior (generalmente llamada vm o app ). Los componentes utilizados como elementos secundarios deben registrarse en su lugar - Registro de componentes:key con v-for - Estado de mantenimiento Vue.component('checkboxes', { props: ['value', 'options'], template: ` <div> <template v-for="item in optionsWithKey"> <input type="checkbox" :id="item.key" :value="item.name" v-model="model" :key="item.key"> <label :for="item.key">{{item.name}}</label> </template> </div> `, computed: { model: { get() { return this.value }, set(newValue) { this.$emit('input', newValue) } }, optionsWithKey() { return this.options.map(item => ({ ...item, key: "checkbox_"+ item.id })) } } }) new Vue({ el: '#app', data: { checkedNames: [], options:[ {id: 1, name: 'Jack'}, {id: 2, name: 'John'}, {id: 3, name: 'Mike'}, ] } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script> <div id='app'> <checkboxes v-model="checkedNames" :options="options"> </checkboxes> <pre>{{ checkedNames }}</pre> </div>No estoy seguro, pero inténtalo...
niño:
<input type="checkbox" :id="item.id" :value="item.name" :change="$emit('valueChecked',item.name)">Y en padre:
<child-component @valuChecked="getValue"><child-component> methods:{ getValue(value){ this.checkedNames.push(value); }}
A ver si esto ayuda
// parent template <child-component @update:checked-names="updateCheckedNames"> <child-component> // parent data() { return { checkedNames: [] }; }, methods: { updateCheckedNames(name) { if (this.checkedNames.includes(name)) { const index = this.checkedNames.indexOf(name); this.checkedNames.splice(index, 1); } else { this.checkedNames.push(name); } } } // child template <div v-for="item in collection"> <input type="checkbox" :id="item.id" :value="item.name" @click="$emit('update:checked-names', item.name)"> // emit here <label :for="item.id"> {{item.name}}</label> </div>