使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息

最新推荐文章于 2024-07-19 14:26:17 发布

莫物

最新推荐文章于 2024-07-19 14:26:17 发布

阅读量1.3k

点赞数 3

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45618937/article/details/128078539

版权

本文探讨了在使用Vue的el-autocomplete组件时遇到的校验问题，即选择选项后仍然显示错误信息。解决方案是将校验规则中的触发器trigger从'blur'改为['blur', 'change']，确保在输入变化时即时校验。

摘要由CSDN通过智能技术生成

1、问题

使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息，再次点击选项才正常
在这里插入图片描述

2、解决方案

把校验规则中的 trigger: “blur” 改成 trigger: [‘blur’, ‘change’]，如下所示

applicantCompany: [
   { required: true, message: '请输入委托单位', trigger: ['blur', 'change'] }
],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

莫物

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息

使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息
复制链接

扫一扫

el-autocomplete 必填校验问题

神膘护体小月半的博客

09-13

1152

【代码】el-autocomplete 必填校验问题。

前端踩坑（七）(vue) el-autocomplete 1.下拉延时出现，影响其他弹出窗口；2.收起下拉

TUTsmile的博客

12-17

1798

解决办法 1.下拉延时出现，影响其他弹出窗口（穿透了蒙版）根据官方文档可得知防抖延时，有个 debounce 将其设置为 0 即可 <el-autocomplete :debounce="0"> </el-autocomplete> 2.下拉在最上层设置ref <el-autocomplete v-model="localSelec...

参与评论您还未登录，请先登录后发表或查看评论

input输入框验证规则trigger遇到的bug有值却仍然显示不通过 vue与elementUI

00年女程序员分享自己的学习笔记

09-14

4109

点击input输入框出现弹框，弹框选择数据之后，input输入框回显数据，但是trigger使用blur，此时验证未查到数据，所以，此时输入框中即使有数据，也会报错提示请输入内容。下拉框（el-select）、日期选择器（el-date-picker）、复选框（el-checkbox）、单选框（el-radio）验证时，trigger的值选择。对el-input输入框的验证，trigger的值选。，即当值发生变化时就进行验证。，即失去焦点时进行验证。

Vue结合element UI组件 el-autocomplete 使用，解决根据选择类型来决定输入建议的数据延迟问题

最新发布

yuxuan89814的专栏

07-19

503

element UI组件 el-autocomplete 应用，解决根据选择类型来决定输入建议的数据延迟问题

下拉搜索el-autocomplete

bluejad的博客

06-29

583

【代码】下拉搜索el-autocomplete。

avue 中使用el-autocomplete，验证失效的问题

qq_43817049的博客

03-30

1538

如图明明已经选择值了，但是验证失效，原因在与事件触发的顺序是先触发blur后select 所以在blur 事件里值是空的，因此就会触发验证解决办法就是触发验证回调写在select里在option里写规则然后写一个handleSelect方法，在select 事件时，可以拿到想要的值(row.userName) 重点是在select方法里找到validator 当然，如果一直都不会触发select方法，那就不能对数据进行判空了，因此在handleBlur也要写多一次.

使用element-ui中的el-autocomplete报错

lyh135923的博客

05-15

3317

使用element-ui中的el-autocomplete报错，报错如下：在handleChange这个方法中报错，传入的不是event事件，而是输入的字符串。最近使用element-ui中的el-autocomplete发现框架原生代码里面报错，一开始我还不相信原生代码会有这么低级的错误，所有我花了两个小时看我自己的问题，该试了都试了，直到在在线运行事例代码后发现也报错才确认。有个问题，如何给element官方提问题呢？ ...

20181209——复习ElementUI（二）Form操作

寄蜉蝣于天地，渺沧海之一粟。

12-09

515

Radio 单选框 el-radio 标签里面v-model绑定这个data中的数据项 label表示是第几个，在data中数据中的返回值进行选定 disabled属性，使单选框禁用只要给radio标签设置了disabled属性，无法更改单选框组，节省了代码，无需给每一个单选框都绑定v-model el-radio-group 单选框组还有size属性，来决定单选框的大小设置border...

基于Vue el-autocomplete 实现类似百度搜索框功能

10-16

el-autocomplete是一个具有自动完成功能的组件，它能够根据用户输入的内容提示和补全搜索建议。首先，我们需要了解el-autocomplete组件的基本属性和使用方法。在给定的代码片段中，我们看到一个包含了el-...

Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

10-16

el-autocomplete组件支持`@select`事件，当用户选择下拉列表中的某一项时，会触发这个事件。我们可以在对应的`handleSelect`方法中实现自动填充逻辑： ```javascript handleSelect(item) { this.form.name = item....

详解element-ui中el-select的默认选择项问题

10-16

当用户从下拉列表中选择一个选项时，`v-model`的值会自动更新为所选选项的`value`。在给出的代码片段中，`query`变量被用作`v-model`，并初始化为`'02'`，这意味着组件加载时，`el-select`会显示值为`'02'`的选项，...

element下拉搜索el-autocomplete

qq_21631111的博客

10-28

478

<el-autocomplete class="inline-input" v-model="name" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect" style="width: 200px"> <template slot-scope="{ item }"> <div class="name">

el-autocomplete判空校验时，第一次点击不通过，再次点击才正常

悢七的CSDN博客

04-20

1222

把校验规则中的 trigger: “blur” 改成 trigger: [‘blur’, ‘change’] 无语。

vue + elementUI （el-autocomplete）实现点击复制功能

qq_45780380的博客

10-29

1794

vue + elementUI （el-autocomplete）实现点击复制功能需求：根据提示搜索出结果，并实现点击复制的功能上图：代码： <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="h

再次记录一个非常的无语的bug，el-autocomplete验证规则出不来的问题

老道，柳三剑是也。

01-02

1512

前提项目在交由客户试用一段时间后，因为el-select下拉框数据太多，选择起来太过费时费力，所以提出修改，希望可以修改成类似百度搜索那种，可以在输入一个字后，有联想结果的那种，听到这个需求的时候，我立刻想起了el-autocomplete这个组件。遇到的问题问题1：只有输入候选项的第一个汉字，才有联想结果解决方法：将原代码中的toLowerCase()) === 0改成toLowerCase()) > -1即可解决该问题。原代码： createFilter(que...

Vue2 el-cascader 表单校验明明选择了参数但是不触发rules

Youyzq的博客

03-23

1782

Vue2 el-cascader 表单校验明明选择了参数但是不触发rules

对于el-autocomplete组件使用中字符串和数字导致的报错

fury的博客

04-02

317

【代码】对于el-autocomplete组件使用中字符串和数字导致的报错。

element-ui中el-form表单验证，只有点击提交按钮时才进行校验

唐唐唐行的博客

04-04

3619

element-ui中el-form表单验证，只有点击提交按钮时才进行校验

vue3el-form中使用el-autocomplete

04-09

在Vue 3中使用Element UI的el-autocomplete组件可以通过以下步骤实现： 1. 首先，确保你已经安装了Element UI和Vue 3的相关依赖。 2. 在你的Vue组件中，引入el-autocomplete组件和相关的样式： ```javascript import { ElAutocomplete } from 'element-plus'; import 'element-plus/lib/theme-chalk/el-autocomplete.css'; ``` 3. 在template中使用el-autocomplete组件，并绑定相关的属性和事件： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect" ></el-autocomplete> </template> ``` 4. 在data中定义value属性，并实现querySearch方法和handleSelect方法： ```javascript export default { data() { return { value: '', }; }, methods: { querySearch(queryString, cb) { // 根据输入的queryString进行搜索，获取匹配的建议列表 // 将建议列表通过cb回调函数返回 }, handleSelect(item) { // 处理选中某个建议项的逻辑 }, }, }; ``` 5. 在querySearch方法中，根据输入的queryString进行搜索，并将匹配的建议列表通过cb回调函数返回。你可以使用异步请求或者本地数据来实现搜索逻辑。 6. 在handleSelect方法中，处理选中某个建议项的逻辑。你可以根据选中的项进行相应的操作，比如更新value的值或者执行其他操作。这样，你就可以在Vue 3中使用el-autocomplete组件了。