相同功能的按钮，但分别使用 Vue 和 Vuetify

Question

Codepen Demo

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

如何使用相同的功能 botton /checkout 但分开使用？

在上面的示例中，我想检查必填的 名字 字段并检查 姓氏 字段，现在功能链接到两个复选框，很想知道一种干净的方法来分别单击它们。

Answer 1

您可以删除 handleChanges 并使用类似这样的东西

@click="Frequired = !Frequired"

和

@click="Lrequired= !Lrequired"

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

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