<p>如何在Vue中创建自定义复选框。当复选框改变时，它应该调用函数。
我得到了错误“无法读取未定义的属性'id'”
和警告“在执行本机事件处理程序期间出现未处理的错误”</p>
<p>自定义复选框：</p>
<pre class="brush:js;toolbar:false;"><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></pre>
<p>我想在父组件中使用它：</p>
<p>
<pre class="brush:js;toolbar:false;"><Checkbox
v-for="filter of filters"
:key="filter.id"
:label="filter.name"
:id="filter.id"
v-model="filter.selected"
@do="mutuallyExclusive(filter.id)"
/></pre>
</p>
1
877
收藏
无法重复出现未定义和未处理的错误，您需要进一步调试。
但是您正在发出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>