代码之家 › 专栏 › 技术社区 › Tom

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

vuetify.js toggle vue.js javascript

Tom · 技术社区 · 7 年前

我正在使用 VuetifyJS 对于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 回复 | 直到 7 年前

Mehul Prajapati 6 年前

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

Vamsi Krishna 7 年前

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

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

自 v-model 属于 v-switch 是必须的 开关1 ,每当开关打开/关闭 开关1 使用更改的 newValue

这是一个 codepen

推荐文章

Veer3383 · 如何更改/覆盖Vuetify js中禁用字段的默认颜色?

7 年前

Peter Krauss · emit go modal在其他实例中什么都不做,如何调用modal?

7 年前

Yuri F Becker · 在vue中以编程方式创建表单

7 年前

L. Gangemi · Vue+Vuetify扩展面板输入/离开动画

7 年前

niutech · 如何异步验证Vuetify文本字段?

7 年前

Jay Vignesh · VueJs-在方法之间传递变量

7 年前

JustStartedProgramming · 在Vuejs中读取HTML响应以在对话框中显示

7 年前

Raluca · 在滑块中获取居中元素的对象

7 年前

tobiasg · 将new Date()与v-Date-picker一起使用不起作用

7 年前

IsraGab · 动态内容到v-expansion-panel-content

7 年前