问题描述
我正在尝试创建具有自动完成功能的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>
解决方法
尝试在选择组件方法上添加此方法:
validate(...args) {
return this.$refs.members.validate(...args);
}
它对我有用,显然它将输入的验证发送给父