时间戳

首页 > 解决方案 > 如何以一种形式进行 2 次搜索（vuetify）？

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

问题描述

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

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

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

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

我该怎么做？

标签： formsvalidationvue.jsvue-componentvuetify.js

解决方案

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

在这里工作codepen：https ://codepen.io/chansv/pen/abbVGRx?editors=1010

推荐阅读