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

相同的功能按钮，但单独使用它们Vue＆amp; Vuetify

2 个答案: