如果 switch 在 VueJS/VuetifyJS 中切换，则调用函数

Question

我正在为 VueJS 使用 VuetifyJS，如果开关被切换，我需要调用一个函数。怎么做？

模板：

 <v-container fluid>
    <v-switch :label="`Switch 1: ${switch1.toString()}`" v-model="switch1"></v-switch>
  </v-container>
</template>

脚本：

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

Answer 1

您可以在 switch1 数据属性上设置 watcher，如下所示：

<script>
  export default {
    data () {
      return {
        switch1: false
      }
    },
    watch: {
      switch1(newValue){
        //called whenever switch1 changes
        console.log(newValue);
      }
    }
  }
</script>

由于 v-switch 的 v-model 绑定到 switch1 ，每当切换 on/off 时，都会调用 switch1 的监视处理程序已更改 newValue

这是一个codepen

Answer 2

找到另一个更好的解决方案来使用 @change 道具，每次切换开关时都会调用该方法。

    <v-switch
        :input-value="true"
        @change="changeState(item.id)"
    ></v-switch>
    <v-switch
        :input-value="true"
        @change="changeState(item.id)"
    ></v-switch>

这是脚本，

methods:{
    changeState(id) {
        console.log("Switch "+id);
        // Do stuff
    }
}

如果 switch 在 VueJS/VuetifyJS 中切换，则调用函数

Call function if switch gets toggled in VueJS/VuetifyJS

javascript

toggle

vue.js

vuetify.js