Buefy switch how to click on it in parent component

Question

I have a Vue 2 app with Buefy. there is a component which contains Buefy switch. In some moment I need to click on the switch component. So I add ref property to the switch component and then I call it like this.$refs.switcherName.click(). But it throws me an error click is not a function. If I dump the $refs.switcherComponent it is component instance.

This is the code where I call the click()

 watch: {
    storeSelected(prevVal, newVal) {
        this.$refs.onlySelectedToggler.click();
    },
},

score 0 · Answer 1 · answered Mar 02 '22 at 08:58

Can you be more specific on what you're trying to accomplish please? The error does tell you that "click()" is not a function of a Buefy switch, which is true. To change whether the switch is "on" or "off", you can use a v-model and data attribute to just change the value. For example:

<template>
    <section>
      <b-field>
        <b-switch v-model="isSwitched">Default</b-switch>
      </b-field>

      <b-button @click="changeSwitch">Click to Change</b-button>
    </section>
</template>

<script>
    export default {
        data() {
            return {
              isSwitched: false
            }
        },
        methods: {
          changeSwitch () {
            this.isSwitched = !this.isSwitched
          }
        }
    }
</script>

Buefy switch how to click on it in parent component

1 Answers1