Кнопки той же функции, но использовали их отдельно 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

**, как сказал @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
      }
    }
  }

Answer 2

вы можете удалить handleChanges и использовать что-то вроде этого

@click="Frequired = !Frequired"

и

@click="Lrequired= !Lrequired"

демо: https://codepen.io/jacobgoh101/pen/ZoabNB?editors=1000