VUE项目中Element-ui下拉组件验证失效怎么解决

今天就跟大家聊聊有关VUE项目中Element-ui下拉组件验证失效怎么解决,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强>问题描述:

在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的选项选项是使用v指令遍历的,

这样也没有问题,但是如果加上多个属性,也就是可以多选就会出现下拉框验证时失效问题。

<>强问题现象:

如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求

<强>解决思路:

如果说找遍组件里的方法都无法获得我们适合使用的,那就要动用原生基本功了

console.log一下v模型在此组件上绑定的属性,你发现你绑定的字符串(一般情况下都是字符串,这里就拿字符串举例说明)打印出来却是数组

所以如果验证必填的话我们就直接判断v模型在此组件上绑定的属性的长度是否大于0就好了;其他要求的话可以留言

<强>思路验证:

我有试验过在规则增加类型:“测试# 39;,表面上看起来是可以的,但是打开控制台,它已经报错了:可知规则类型文本,如下图:

竟然没有type=文本属性!好吧~只能继续

既然多选设置之后输出的是数组,那就跟chexkbox一样,我可以把v模型属性改成[],然后规则里面的类型:& # 39;数组# 39;实验一下,结果不报的错,但是验证也不生效

可还见元素是有坑踩哦,我的项目紧急就先原生解决了,哪天找到组件解决办法我会及时更新的,当然如果谁知道解决办法也请分享给我哦~欢迎技术交流

<强>解决代码

。长度===0 | | this.form.STORE_PROVINCE。长度==& # 39;& # 39;){
　　美元。message.error(& # 39;请选择至少一个区域& # 39;)
　　返回假
　　其他}{//要执行的代码
　　}

以上便可解决了。

<强>元素ui表单验证选择既获取标签又获取价值

<强> html部分