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

Question

我正在尝试创建具有自动完成功能的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>

Answer 1

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

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

它对我有效，显然它将输入的验证发送到父

查阅资料来源：https://github.com/quasarframework/quasar/issues/7305

Answer 2

将ref添加到表单并尝试验证表单。你可以给予道具"贪婪的；