Quasar 自定义输入组件字段验证答案

【问题标题】：Quasar custom input component field validationQuasar 自定义输入组件字段验证
【发布时间】：2020-12-20 22:57:58
【问题描述】：

我正在尝试使用自动完成创建 Quasar 自定义选择组件。除了验证错误外，一切正常，只有当我单击输入框并离开而不添加任何值时才会显示验证错误。但是，即使有任何错误，表单也会提交。

组件代码

    <q-select
        ref="members"
        v-model="sModel"
        use-input
        :options="filteredOptions"
        :multiple="multiple"
        :use-chips="useChips"
        :label="label"
        :option-label="optionLabel"
        :option-value="optionValue"
        @filter="filterFn"
        @input="handleInput"
        emit-value
        map-options
        hint
        dense
        outlined
        lazy-rules
        :rules="rules"
        >
        <template v-slot:prepend>
            <q-icon :name="icon" />
        </template>
    </q-select>
</template>

<script>
export default {
  props: {
    value: Array, 
    rules: Array, 
    icon: String,
    label: String,
    optionValue: String,
    optionLabel: String,
    options: Array,
    multiple: Boolean,
    useChips: Boolean
  },
  data () {
    return {
      filteredOptions: this.options,
      sModel: this.value,
      validationErrors:{

      }
    }
  },
  methods: {
    filterFn (val, update) {
      if (val === '') {
        update(() => {
          this.filteredOptions = this.options
          // with Quasar v1.7.4+
          // here you have access to "ref" which
          // is the Vue reference of the QSelect
        })
        return
      }

      update(() => {
        const needle = val.toLowerCase()
        const optionLabel = this.optionLabel
        this.filteredOptions = this.options.filter(function(v){
          // optionLabel
            return v[optionLabel].toLowerCase().indexOf(needle) > -1
        })
      })
    },
    handleInput (e) {
      this.$emit('input', this.sModel)
    }
  },
}
</script>

在父组件中，我是这样实现的，

<AdvancedSelect
 ref="members"
 v-model="members"
 :options="extAuditEmployees"
 icon="people_outline"
 multiple
 use-chips
 label="Team Members *"
 option-label="formatted_name"
 option-value="id"
 :rules="[ val => val && val.length && !validationErrors.members > 0 ||  validationErrors.members ? validationErrors.members :  'Please enter Team members' ]">
</AdvancedSelect>

【问题讨论】：

尝试不使用 'lazy-rules' :)

标签： vuejs2 vue-component quasar-framework

【解决方案1】：

尝试在选择组件方法上添加此方法：

validate(...args) {
    return this.$refs.members.validate(...args);
}

它对我有用，显然它将输入验证发送给父级

来源咨询：https://github.com/quasarframework/quasar/issues/7305

【讨论】：

【解决方案2】：

将 ref 添加到表单并尝试验证表单。你可以给表格“贪婪”的道具。

【讨论】：