Как реализовать компонент ButtonSwitch?

Question

Как реализовать компонент ButtonSwitch Нужен реализовать передачу значения с v-model на верх компонента

Обьявляю компонент <ButtonSwitch @value="isActive" /> Сам компонент

<template>
 <label class="switch">
 <input type="checkbox" @click="handleGetValue">
 <span class="slider round"></span>
 </label>
</template>

  <script>

    export default {
    name: 'Toggle',
    emits: ['update:value'],
    methods: {
     handleGetValue() {
       this.$emit('value');
    },
    },
   };
   </script>

Answer 1

Vue.component('ButtonComponent', {
    data: () => ({
        active: false
    }),
    methods: {
        toggle() {
            this.active = !this.active;
        }
    },
    watch: {
        active(value) {
            this.$emit('input', value);
        }
    },
    template: `<button @click="toggle()">Switch</button>`
});

Vue.component('MainComponent', {
    data: () => ({
        is_active: false
    }),
    template: `
    <main>
        <h1>Count: <b>{{ is_active }}</b></h1>
        <button-component v-model="is_active" />
    </main>
    `
});

new Vue({ el: "#app" })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <main-component />
</div>

БЛОГ НА HUSL

Как реализовать компонент ButtonSwitch?

Ответы (1 шт):