Manière correcte de créer un composant de case à cocher personnalisé Vue

Question

Comment créer une case à cocher personnalisée dans Vue. Lorsque la case à cocher change, elle doit appeler la fonction. J'ai eu l'erreur "Impossible de lire la propriété 'id' non définie" et avertissement "Une erreur non gérée s'est produite lors de l'exécution d'un gestionnaire d'événements natif"

case à cocher personnalisée :

<template>
  <div class="filtre">
    <entrée
        :ref="id"
        :id="id"
        tapez="case à cocher"
        classe = "filtre-case à cocher"
        @change="$emit('faire', $emit)"
    />
    <span>{{ label }}</span>
  </div>
</modèle>

<script>
exporter par défaut {
  nom : "case à cocher",
  accessoires : {
    étiquette: {
      tapez : chaîne
    },
    est sélectionné: {
      tapez : booléen
    },
    identifiant: {
      tapez : chaîne
    }
  },
}
</script>

Je souhaite utiliser ceci dans un composant parent :

Answer 1

Les erreurs non définies et non gérées ne peuvent pas se reproduire et vous devez déboguer davantage.

Mais vous émettez la fonction d'émission, ce qui est bizarre, et la valeur est toujours filter.id qu'elle soit cochée ou non.

Vous voudrez peut-être faire quelque chose comme ce qui suit :

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>