@Aslero

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

есть компонент 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,
      },
    }
  }
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
  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)"


Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы