Компонент пользовательского переключателя с v-моделью не работает

Question

пытается сделать мой пользовательский компонент Switch в VueJS, следуя этим руководствам Использование v-модели в компонентах , Добавление поддержки v-модели в Custom Vue. js Компоненты но что-то не так, и это не работает.

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

<template>
  <div>
    <input type="checkbox" :id="_uid" 
          :value="value" 
          @input="updateData" 
          class="checkbox">
    <label :for="_uid" class="switch"></label>
  </div>
</template>

<script>
export default {
  props: ["value"],
  data() {
    return {};
  },
  methods: {
    updateData($event) {
      console.log($event.target.value);
      this.$emit("input", $event.target.value);
    }
  }
};
</script>

<style scoped>
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.checkbox:checked + .switch::after {
  left: 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}
.checkbox {
  display: none;
}
</style>

И используя SwitchTest компонент:

    {{switch1}}
    <SwitchTest v-model="switch1"/>
    {{switch2}}
    <SwitchTest v-model="switch2"/>

Вы можете см. весь пример MVCE здесь: https://codesandbox.io/s/ecstatic-meninsky-zx7w0?file= / src / App. vue: 32-131

Когда я переключаю флажок, его значение не меняется. Где я не прав? Спасибо.

Answer 1

Флажки - это особый случай, когда они имеют два состояния (отмечен / не отмечен), которые можно преобразовать в два значения. Обычно это просто true / false, но, поскольку вы связали один :value, вы всегда будете получать только одно и то же значение каждый раз.

Попробуйте привязать логическое значение value prop в checked и передать true / false значение

<input
  type="checkbox"
  :checked="value"
  :id="_uid" 
  @input="$emit('input', $event.target.checked)" 
  class="checkbox"
>