Richtige Methode zum Erstellen einer benutzerdefinierten Kontrollkästchenkomponente für Vue

Question

So erstellen Sie ein benutzerdefiniertes Kontrollkästchen in Vue. Wenn sich das Kontrollkästchen ändert, sollte es die Funktion aufrufen. Ich habe die Fehlermeldung „Eigenschaft ‚id‘ von undefiniert kann nicht gelesen werden“ erhalten. und Warnung „Während der Ausführung eines nativen Event-Handlers ist ein nicht behandelter Fehler aufgetreten“

Benutzerdefiniertes Kontrollkästchen:

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

<script>
Standard exportieren {
  Name: „Kontrollkästchen“,
  Requisiten: {
    Etikett: {
      Typ: Zeichenfolge
    },
    ist ausgewählt: {
      Typ: Boolesch
    },
    Ausweis: {
      Typ: Zeichenfolge
    }
  },
}
</script>

Ich möchte dies in einer übergeordneten Komponente verwenden:

<Kontrollkästchen
   v-for="Filter von Filtern"
   :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>