相同的功能按钮，但单独使用 Vue 和 Vuetify答案

【问题标题】：Same function Buttons but used them separately Vue & Vuetify相同的功能按钮，但单独使用 Vue 和 Vuetify
【发布时间】：2018-05-07 06:06:09
【问题描述】：

Codepen Demo

new Vue({
  el: '#app',
  data: () => ({
    Frequired: true,
    Lrequired: false
  }),
  methods: {
    handleChanges () {
      this.Frequired = !this.Frequired;  
      this.Lrequired = !this.Lrequired;  
    }
  }
})

我如何使用相同的功能 botton /checkout 但分别使用它们？

在上面的示例中，我希望检查必填 First Name 字段并检查 Last Name 字段，现在该函数链接到这两个复选框，很想知道一种干净的方式来分别点击它们。

【问题讨论】：

标签： javascript function vue.js vuejs2 vuetify.js

【解决方案1】：

你可以删除 handleChanges 并使用类似的东西

@click="Frequired = !Frequired"

和

@click="Lrequired= !Lrequired"

演示：https://codepen.io/jacobgoh101/pen/ZoabNB?editors=1000

【讨论】：

谢谢，这是一种快速而干净的方法来操作函数。

【解决方案2】：

** 正如@Jacob Goh 所说，或者如果您需要更多逻辑，那么

你可以传递一个参数而不是做

<v-checkbox label="Required" @click="handleChanges"></v-checkbox>

你可以的

<v-checkbox label="Required" @click="handleChanges('f')"></v-checkbox>

并在你的方法中检查它

  methods: {
    handleChanges (param) {
      if(param==='f'){ 
          this.Frequired = !this.Frequired;  
          // do more stuff
      }else {
          this.Lrequired = !this.Lrequired; 
          // do more stuff
      }
    }
  }

【讨论】：