[Vuejs]-Toggle button component how to reset from parent

by

0👍

I think what you may be saying is that you have a toggle button that can flip a value anywhere (perhaps stored in a higher state?) and a reset button that can set the value back to it’s initial default.

Keep the management of this data property handled outside of toggle, and make toggle responsible for simply flipping the value, and reset responsible for resetting it.

Here is what I would do:

// parent.vue
<template>
  <div>
    Toggled value: {{toggleValue}}
    <resetButton v-model="toggleValue" />
    <toggleButton v-model="toggleValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleValue: false, 
    }
  }
}
</script>



// toggleButton.vue
<template>
  <button @click="toggle">Toggle</button>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
    }
  },
  computed: {
    toggleValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    toggle() {
      this.toggleValue = !this.toggleValue
    }
  }
}
</script>

// resetButton.vue
<template>
  <button @click="reset">Reset</button>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
    }
  },
  methods: {
    reset() {
      this.$emit('input', false);
    }
  }
}
</script>

Leave a comment