[Vuejs]-How can I make 2 search in the one form (vuetify)?

by

0👍

Use computed property for club and country rules. In function body you can check if another option is selected.

  computed: {
    clubRules() {
      return [
        v => (!!v || !!this.selectedCountry) || 'Club is required',
      ];
    } 
  },

0👍

You can have N number of rules for any number inputs in a form, but this a special case where you need to have any one of them to search a player

Instead of form.validate(form validation validates for each input
field based on the rules and independent to the field), In your case
you can manually validate as per your requirements by accessing your
data

methods: {
    searchPlayer() {
      var playerCondition = this.playerNameRules[0](this.playerName) == true;
      var countryClub = this.countryRules[0](this.selectedCountry) == true && this.clubRules[0](this.selectedClub) == true;
      if(this.playerName && this.playerName.length < 3) {
        playerCondition = false;
        countryClub = false;
      }
        if ((playerCondition) || (countryClub)) {
          console.log('validate form success')
        }
        else
          console.log('validate form failed')
     }
  }

Working codepen here: https://codepen.io/chansv/pen/abbVGRx?editors=1010

Leave a comment