Vue.Js, привязка значения к флажку в компоненте

Question

Я делаю компонент, который является оберткой вокруг флажка (я сделал то же самое с вводами типа 'text' и 'number'), но я не могу получить свое переданное значение для правильного связывания.

Мой компонент:

<template>
  <div class="field">
    <label :for="name" class="label">
      {{ label }}
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>
  </div>
</template>
<script>
export default {
  name: 'check-edit',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    errors: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
  },
  computed: {
    listeners () {
      return {
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit('input', event.target.value)
      }
    },
    hasErrors () {
      return this.errors.length > 0
    }
  },
}
</script>

Я импортировал его глобально;и я вызываю его в другом представлении, выполнив:

<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>

Моя модель находится в данных, а свойство ShowInCalendar является логическим, и в моем тестовом случае значение true.Поэтому, когда я просматриваю страницу, флажок установлен.Используя инструменты Vue в Firefox, я вижу модель. ShowInCalendar имеет значение true, и флажок установлен.Однако, когда я щелкаю по нему, флажок остается установленным, и значение ShowInCalendar изменяется на 'on', а затем изменяются, не изменяя значение ShowInCalendar.

Я нашел этот пример здесь: https://jsfiddle.net/robertkern/oovb8ym7/и пытался реализовать локальное свойство данных для него, но результат не работает.

Суть того, что я пытаюсь сделать, - это иметь начальное контрольное состояние флажка, равное ShowInCalendar (или какому-либо другому свойству).привязывается через v-модель к компоненту), а затем необходимо обновить это свойство (чтобы оно было истинным или ложным), когда флажок установлен.

Может кто-нибудь дать мне какой-нибудь совет, пожалуйста?

Спасибо.

Answer 1

Если v-on - единственный прослушиватель, который будет использоваться, может быть проще использовать v-model, как в примере с флажком из Vue input docs .

Однако вы можетеиспользовать прослушиватели, основанные на Связывание родных событий с компонентами документы

<template>
  <div class="field">
    <label :for="name" class="label">
      {{ label }}
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>
  </div>
</template>
<script>
export default {
    name: 'check-edit',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        label: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        errors: {
            type: Array,
            default: () => []
        }
    },
    mounted() {},
    computed: {
        listeners() {
            var vm = this;
            // `Object.assign` merges objects together to form a new object
            return Object.assign(
                {},
                // We add all the listeners from the parent
                this.$listeners,
                // Then we can add custom listeners or override the
                // behavior of some listeners.
                {
                    // This ensures that the component works with v-model
                    input: function(event) {
                        vm.$emit('input', event.target.checked);
                    }
                }
            );
        },
        hasErrors() {
            return this.errors.length > 0;
        }
    }
};
</script>

Answer 2

Вы не должны $emit event.target.value, это значение флажка, это не логическое значение.Если вы хотите определить, является ли флажок обновлением (быть истинным или ложным) или нет, вы должны $emit event.target.checked, как сказал fstep.

Answer 3

Не меняйте реквизит.Ваш компонент, имеющий v-model, должен испускать входные события при изменении .Родитель будет обрабатывать фактическое изменение значения.