Как я могу сделать 2 поиска в одной форме (vuetify)? - PullRequest
Новая
       41

Как я могу сделать 2 поиска в одной форме (vuetify)?

1 голос
/ 31 октября 2019

Мой реальный случай таков: https://codepen.io/positivethinking639/pen/ZEEaOqy?editors=1010

Компонент vue такой: 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({

    selectedCountry: null,
    dataCountry: [
      { name: 'England', id: 1 },
      { name: 'Spain', id: 2 },
      { name: 'Italy', id: 3 },
    ],
    selectedClub: null,
    dataClub: [
      { name: 'Chelsea', id: 1 },
      { name: 'Madrid', id: 2 },
      { name: 'Juventus', id: 3 },
    ],
    playerName: null,
    playerNameRules: [
        // v => !!v || 'Name is required',
        v => (v && v.length >= 3) || 'Player name at least 3 characters',
    ],
    countryRules: [
        v => !!v || 'Country is required',
    ],
    clubRules: [
        v => !!v || 'Club is required',
    ],
    validSearch: false,

  }),

  methods: {
    searchPlayer() {
        if (this.$refs.formSearch.validate()) {
          console.log('validate form success')
        }
        else
          console.log('validate form failed')
     }
  }
})

, поэтому я хочу, чтобы пользователь мог выполнять поиск по имени игрока или пользователюМожно также выполнить поиск по стране и клубу

, если пользователь вводит имя игрока и нажимает кнопку поиска, проверка прошла успешно. наоборот, если пользователь входит в страну и клуб, а затем нажимает кнопку поиска, он проходит срок действия

, поэтому пользователь может выбрать один из них для поиска. но если пользователь нажимает кнопку поиска, не выбирая ее, отображается ошибка проверки

Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Вы можете иметь N правил для любого числа входных данных в форме, но это особый случай, когда вам нужно иметь любое из них для поиска игрока

вместо form.validate(проверка формы проверяется для каждого поля ввода на основе правил и не зависит от поля), В вашем случае вы можете вручную проверить в соответствии с вашими требованиями, обратившись к вашим данным 

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

Рабочий код ручки здесь:https://codepen.io/chansv/pen/abbVGRx?editors=1010

0 голосов
/ 31 октября 2019

Используйте вычисленную собственность для правил клуба и страны. В теле функции вы можете проверить, выбрана ли другая опция. 

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