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 boleh membaca 'id' sifat yang tidak ditentukan" dan amaran "Ralat tidak terkendali berlaku semasa pelaksanaan pengendali acara asli" Kotak semak tersuai:

P粉343408929 · Answer

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