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

我正在尝试用autocomplete创建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>

导出默认值{
道具：{
值：数组，
规则：数组，
图标：字符串，
标签：字符串，
optionValue:String，
选项标签：字符串，
选项：阵列，
多重：布尔，
使用芯片：布尔
},
数据（）{
返回{
filteredOptions:this.options，
sModel:this.value，
验证错误：{
}
}
},
方法：{
过滤器Fn（val，更新）{
如果（val==''）{
更新（（）=>{
this.filteredOptions=this.options
//类星体v1.7.4+
//在这里您可以访问“ref”，其中
//是QSelect的Vue引用
})
返回
}
更新（（）=>{
const needle=val.toLowerCase（）
const optionLabel=this.optionLabel
this.filteredOptions=this.options.filter（函数（v）{
//期权标签
返回v[optionLabel].toLowerCase（）.indexOf（指针）>-1
})
})
},
手动输入（e）{
this.$emit（'input'，this.sModel）
}
},
}

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

<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);
}

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

---

咨询来源：

尝试不使用“惰性规则”：