如果在VueJS / VuetifyJS中切换开关,则调用函数

时间:2018-04-02 09:59:10

标签: javascript vue.js toggle vuetify.js

我正在使用QIODevice::write(const char *data)用于VueJS,如果交换机被切换,我需要调用一个函数。怎么做?

模板:

 <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>

2 个答案:

答案 0 :(得分:7)

找到了另一个更好的解决方案来使用@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
    }
}

答案 1 :(得分:2)

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

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

由于v-model的{​​{1}}绑定到v-switch,无论何时打开/关闭开关,switch1的监视处理程序都会被更改{{1}调用}}

这是codepen