Vue2项目父组件调用Buefy switch的click方法报错如何解决

你通过ref获取到的是Buefy Switch的Vue组件实例，而非可触发点击事件的原生DOM节点，组件本身未对外暴露click方法，因此调用时会抛出click is not a function错误。

• 方案1：访问组件对应的原生DOM节点触发点击
  Buefy组件实例的$el属性指向其挂载的原生根DOM元素，你可以直接调用该元素的click方法，修改后的代码如下：

watch: {
    storeSelected(prevVal, newVal) {
        this.$refs.onlySelectedToggler.$el.click();
        // 若上述代码仍不生效，可定位到组件内部的可点击input元素触发：
        // this.$refs.onlySelectedToggler.$el.querySelector('input').click()
    },
},

• 方案2：直接操作Switch绑定的v-model值（更推荐）
  按照Vue数据驱动的开发规范，Switch开关的状态本身是通过v-model绑定布尔变量控制的，你不需要手动触发DOM点击，直接取反对应绑定变量即可实现开关切换，效果和点击完全一致，例如：
  假设你的Switch组件代码为：

<b-switch v-model="isOnlySelected">仅展示选中项</b-switch>

直接修改对应变量即可：

watch: {
    storeSelected(prevVal, newVal) {
        this.isOnlySelected = !this.isOnlySelected
    },
},

内容的提问来源于stack exchange，提问作者Čamo