文章/答案/技术大牛

发布

社区首页 >问答首页 >在VueJS/VuetifyJS中切换开关时调用函数

问在VueJS/VuetifyJS中切换开关时调用函数
EN

Stack Overflow用户

提问于 2018-04-02 17:59:10

回答 2查看 11K关注 0票数 8

我正在为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>

vue.js

toggle

vuetify.js

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-02 18:11:25

您可以按如下方式设置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，因此每当开关打开/关闭时，都会使用更改后的newValue调用switch1的监视处理程序

这是一个codepen

票数 7

Stack Overflow用户

发布于 2018-12-08 22:37:45

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

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

票数 20

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49609138

复制

相似问题

问在VueJS/VuetifyJS中切换开关时调用函数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在VueJS/VuetifyJS中切换开关时调用函数EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在VueJS/VuetifyJS中切换开关时调用函数
EN