如何使自定义复选框组件Vue正确

Question

如何在Vue中创建自定义复选框。当复选框被更改时，他应该调用函数。无法读取未定义的属性'id';和警告"执行本机事件处理程序时出现未处理错误">

自定义复选框:

<template>
<div class="filter">
<input
:ref="id"
:id="id"
type="checkbox"
class="filter-checkbox"
@change="$emit('do', $emit)"
/>
<span>{{ label }}</span>
</div>
</template>
<script>
export default {
name: "Checkbox",
props: {
label: {
type: String
},
isSelected: {
type: Boolean
},
id: {
type: String
}
},
}
</script>

我想如何在父组件中使用它:

<Checkbox
v-for="filter of filters"
:key="filter.id"
:label="filter.name"
:id="filter.id"
v-model="filter.selected"
@do="mutuallyExclusive(filter.id)"
/>

Answer 1

不能重复未定义和未处理错误的问题，您需要进一步调试。

但是你发出的emit函数，这很奇怪，在改变时，无论是否选中，值总是filter.id

你可能想这样做:

new Vue({
el: '#app',
components: {
'Checkbox': {
template: '#checkbox-template',
props: {
label: {
type: String,
default: ''
},
value: {
type: Boolean,
default: false
},
id: {
type: String,
default: ''
}
}
}
},
data: () => ({
filters: [{
id: 1,
name: 'a',
selected: true,
},{
id: 2,
name: 'b',
selected: false,
}]
}),
methods: {
mutuallyExclusive(value) {
console.log(value)
}
}
})

<div id="app">
<Checkbox 
v-for="filter of filters" 
:key="filter.id" 
:label="filter.name" 
:id="filter.id" 
v-model="filter.selected" 
@change="mutuallyExclusive" 
/>
</div>
<template id="checkbox-template">
<div class="filter">
<input 
:ref="id" 
:id="id" 
type="checkbox" 
class="filter-checkbox"
:checked="value"
@change="$emit('change', {value:$event.target.checked, id})" 
/>
<span v-if="label">{{ label }}</span>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>