Как передать модель в кастомный switch Vue js?

Question

[Максим]

есть компонент switch

<template>
  <div
    class="ivu-switch"
    :class="{ 'ivu-switch-checked': isChecked }"
    @click.prevent="toggleSwitch"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
    }
  },
  methods: {
    toggleSwitch() {
      this.isChecked = !this.isChecked
      this.$emit('input', this.isChecked)
    },
  },
}
</script>

на форме я вызываю этот компонент, но вопрос, как передать модель в компонент, чтобы значение isChecked менялось в зависимости от значения модели

<InputSwitch v-model="form.is_published" />

data() {
    return {
      form: {
        is_published: false,
      },
    }
  }

Comments

[Алексей Скляров]

Вы же уже создали событие в $emit, отлавливайте его в родительском компоненте

[Максим]

Алексей Скляров, нужно наоборот в компоненте отлавливать модель из родительского компонента

[Алексей Скляров]

Максим, передавайте через prop

Answer 1

[0xD34F]

1. Убрать:
   
   

   data() {
     return {
       isChecked: false,
     }
   },
   methods: {
     toggleSwitch() {
       this.isChecked = !this.isChecked
       this.$emit('input', this.isChecked)
     },
   },

   
   
   
2. Добавить:
   
   

   props: {
     value: Boolean,
   },

   
   
   
3. Заменить:
   
   :class="{ 'ivu-switch-checked': isChecked }" на :class="{ 'ivu-switch-checked': value }"

@click.prevent="toggleSwitch" на @click.prevent="$emit('input', !value)"