Cara yang betul untuk membuat komponen kotak semak tersuai Vue

Question

Cara membuat kotak pilihan tersuai dalam Vue. Apabila kotak semak berubah, ia harus memanggil fungsi. Saya mendapat ralat "Tidak dapat membaca 'id' harta yang tidak ditentukan" dan amaran "Ralat tidak terurus berlaku semasa pelaksanaan pengendali acara asli"

Kotak semak tersuai:

<template>
  <div class="filter">
    <masukan
        :ref="id"
        :id="id"
        type="kotak semak"
        class="filter-checkbox"
        @change="$emit('do', $emit)"
    />
    <span>{{ label }}</span>
  </div>
</template>

<skrip>
eksport lalai {
  nama: "Kotak Semak",
  alat peraga: {
    label: {
      jenis: Rentetan
    },
    isSelected: {
      jenis: Boolean
    },
    ID: {
      jenis: Rentetan
    }
  },
}
</script>

Saya mahu menggunakan ini dalam komponen induk:

Answer 1

Ralat yang tidak ditentukan dan tidak dikendalikan tidak boleh berulang dan anda perlu menyahpepijat lebih lanjut.

Tetapi anda memancarkan fungsi emit, yang pelik, dan nilainya sentiasa filter.id sama ada disemak atau tidak.

Anda mungkin mahu melakukan sesuatu seperti berikut:

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>