製作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>