如何以一种形式进行 2 次搜索（vuetify）？答案

【问题标题】：How can I make 2 search in the one form (vuetify)?如何以一种形式进行 2 次搜索（vuetify）？
【发布时间】：2020-02-26 19:58:30
【问题描述】：

我的真实情况是这样的：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')
     }
  }
})

所以我希望用户能够按球员姓名搜索，或者用户也可以按国家和俱乐部搜索

如果用户输入玩家姓名并点击搜索按钮，则验证成功。反之，如果用户输入国家和俱乐部，然后点击搜索，则通过有效性

因此用户可以选择其中之一进行搜索。但是如果用户单击搜索按钮而不选择一个，则会显示验证失败

我该怎么做？

【问题讨论】：

标签： forms validation vue.js vue-component vuetify.js

【解决方案1】：

您可以为表单中的任意数字输入设置 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

【讨论】：

【解决方案2】：

将计算属性用于俱乐部和国家/地区规则。在函数体中，您可以检查是否选择了另一个选项。

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

【讨论】：

该方法不起作用，您无法访问此内部箭头功能