如何将类型复选框的输入绑定到' vuejs '中的子组件的v-model到父组件?

Question

如何在parent component上将child component中存在的类型复选框的输入键合到v-model中?

所需组件方式-

父——

<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}]},
]
}
})

孩子——

<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}
})

如果选中复选框，如何将商品id、数量和主id发送给父方?

Answer 1

1. 在组件上使用v-model
2. new Vue()仅用于创建顶级Vue实例(通常称为vm或app)。作为子元素使用的组件必须注册——组件注册
3. 始终使用:key和v-for-保持状态

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>

Answer 2

我不确定，但试试…

孩子:

<input type="checkbox" :id="item.id" :value="item.name" :change="$emit('valueChecked',item.name)">

And in parent:

<child-component @valuChecked="getValue"><child-component>
methods:{
getValue(value){
this.checkedNames.push(value);
}

}

Answer 3

看看是否有帮助

// 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>