Блог

Главная - Вопросы по программированию - Как правильно сделать пользовательский компонент флажка Vue

Как правильно сделать пользовательский компонент флажка Vue

#javascript #vue.js #checkbox #vue-component

Вопрос:

Как я могу создать пользовательский флажок в Vue. И когда флажок изменен, он должен вызвать функцию. Я получил ошибки «Не удается прочитать идентификатор свойства» неопределенный «»И предупреждения» Необработанная ошибка во время выполнения собственного обработчика событий »

Настраиваемый флажок:

 <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)"
/>

Ответ №1:

Не могу повторить проблему с неопределенными и необработанными ошибками, вам нужно отладить это дальше.

Но вы испускаете функцию испускания, что странно, также при изменении значения всегда будет 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>
Метки: