View UI (iview) select 标签选中值,重置为空后,值为 undefined_iview重置表单数据出现undefined的问题-程序员宅基地

技术标签: View UI  

View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo

 

问题描述:在使用 View UI (iview) 的 select 标签时,无意间发现一个问题,就是在select 标签中选中一个值,然后将 select 标签置空,获取 select 标签中的值为 undefined,此处正常应该为设置的空值,但实际却是undefined。有趣的是点击 2 次重置为空按钮后,却能获取到设置的空值

 

代码如下

<template>
    <Form ref="formValidate1" :model="formValidate" :rules="ruleValidate" :label-width="80">
        
        <FormItem label="City" prop="city">
            <Select v-model="formValidate.city" filterable placeholder="Select your city">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
            </Select>
        </FormItem>
       
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate1')">Submit</Button>
            <Button @click="handleReset('formValidate1')" style="margin-left: 8px">Reset</Button>
        </FormItem>

    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    city: ''
                },
                ruleValidate: {
                    city: [
                        { required: false, message: 'Please select the city', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                        console.log(JSON.stringify(this.formValidate))
                        console.log(this.formValidate.city)
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>

 

运行效果

将选中值置空后报 undefined

 

点击 2 次重置,反而有值了

 

解决办法:笔者在网上查找相关内容,发现很多人也遇到了同样的情况,最后在  View UI (iview) 的官方 github 上找到了解决办法,按照 View UI (iview) 官方的设计,select 标签绑定的值必须为 Option 中已存在的,知道了这一点,将代码改造如下,即在 Option 中添加一个默认空值,笔者这里添加了 <Option value="0">请选择城市</Option>,并将 city 默认值设为 '0'

 

<template>
    <Form ref="formValidate1" :model="formValidate" :rules="ruleValidate" :label-width="80">
        
        <FormItem label="City" prop="city">
            <Select v-model="formValidate.city" filterable placeholder="Select your city">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
                <Option value="0">请选择城市</Option>
            </Select>
        </FormItem>
       
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate1')">Submit</Button>
            <Button @click="handleReset('formValidate1')" style="margin-left: 8px">Reset</Button>
        </FormItem>

    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    city: '0'
                },
                ruleValidate: {
                    city: [
                        { required: false, message: 'Please select the city', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                        console.log(JSON.stringify(this.formValidate))
                        console.log(this.formValidate.city)
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>

 

运行如下

 

参考文档:https://github.com/view-design/ViewUI/issues/446

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wsjzzcbq/article/details/107674794

智能推荐

拿到一个待检测的站或给你一个网站,你觉得应该先做什么?-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏14次。拿到一个待检测的站或给你一个网站,你觉得应该先做什么?一、信息收集1.获取域名的whois信息,获取注册者邮箱姓名电话等。2.通过站长之家、明小子、k8等查询服务器旁站以及子域名站点,因为主站一般比较难,所以先看看旁站有没有通用性的cms或者其他漏洞。3、通过DNS域传送漏洞、备份号查询、SSl证书、APP、微信公众号、暴力破解、DNS历史记录、K8 C段查询、Jsfinder、360或华为威胁情报、证书序列号获取企业域名与ip。4.通过Nmap、Wappalyzer、御剑等查看服务器操作系统版本

springboot 大文件分片上传、断点续传和秒传-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏17次。springboot测试项目——文件的普通上传、分片上传、断点续传和秒传实现。

MFC日期时间拾取控件和月历控件_mfc中cdatetimectrl重绘-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏10次。一、日期时间拾取控件CDateTimeCtrl 1.属性值 Day States 将某一天的显示变为粗体 Multi Select 允许用户在控件中选择日期范围,否则只允许选择一个日期 No Today Circle 不用红色圈定今天的日期 No Today 在控件的下边不再显示今天的日期 Week Numbers 在控件的每行左边显示周数 2.基本操作 日期时间拾取控件可改变月历对_mfc中cdatetimectrl重绘

Python爬取城市二手房数据-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏56次。今天要分享的教程是爬取各大城市的二手房数据,抛开以前的文章不谈,下面的内容应该足够你实现这篇爬虫。以下是正文:1. 确定目标今天我们的目标官网链接是:https://www.lianjia..._二手房数据统计python

python 关于私有属性和私有方法_有关python的私有属性-程序员宅基地

文章浏览阅读253次。私有属性和私有方法 python对于类的成员没有严格的访问控制限制,这与其他面向对象语言有区别,关于私有属性和私有方法,有如下要点: 1.通常我们约定,两个下划线开头的属性是私有的(private),其他为公共的(public)。 2.类内部可以访问私有属性(方法) 3.类外部不能直接访问私有属性(方法) 4.类外部可以通过“_类名__私有属性(方法)名“访问私有属性(方法)【注】:方法本质上也是属性!只不过是可以通过()执行而已,所..._有关python的私有属性

idea导入项目,Lombok插件安装了,但是无get set方法_导入了lomlook 还是没有get set-程序员宅基地

文章浏览阅读411次。排查步骤:1.保证安装了Lombok插件2.保证导入了Lombok jar包3.是否勾选了配置项_导入了lomlook 还是没有get set

随便推点

【ffmpeg】ffmpeg avformat_open_input返回失败的解决办法_avformat_open_input返回值-5-程序员宅基地

文章浏览阅读2.5k次。很多朋友在使用新版本的ffmpeg时,都遇到了avformat_open_input返回失败的问题。在下也遇到了此问题。在stackoverflow上搜了一下,解决方法如下。在调用avformat_open_input之前,先调用如下接口初始化一下即可。av_register_all();这算是新版本ffmpeg代码流程的一个变化了。老版本的ffmpeg,代码流程如下:avcodec_..._avformat_open_input返回值-5

leetcode454.四数相加II_四数相加2-程序员宅基地

文章浏览阅读81次。https://leetcode-cn.com/problems/4sum-ii/用Hashmap来存数据相加的值,先上我的思路进阶1.四阶暴力扫描,哈哈哈哈哈肯定不可能2.二阶扫,把数组a和数组b的值加起来存进map1,数组c和数组d的值加起来存进map2,然后遍历map1,判断map2中是否存在 (0-map1[i]),时间复杂度O(n^2),空间复杂度O(n^2),但是比较麻烦,3次二阶遍历。3.先把数组a和数组b进行遍历,存进map里,在遍历数组c和数组d的时候,每次都判断一下(0-_四数相加2

完美解决 appium-desktop 一运行就停止运行_appium desktop打开2个断开被关闭一个-程序员宅基地

文章浏览阅读4k次。这个问题困扰了我1天多的时间,终于被我发现问题的所在了,安装jdk的时候它还会安装一个jre,可以看看jdk同级目录下有没有jre,如果没有那么重新安装一下就解决了_appium desktop打开2个断开被关闭一个

(新版)通过java程序,给微信发送消息_如何通过程序收发微信信息-程序员宅基地

文章浏览阅读2.9k次。之前写过一篇使用飞鸽快信给自己的微信发送消息的示例。https://blog.csdn.net/xcxzzx01/article/details/80461086两年多过去了,飞鸽快信已改名捷易快信,相关的接口也已升级,故重新写一篇博客,以方便广大网友。1. 捷易快信网站地址http://jy.erpit.cn/2. 实现方式,依赖的jar包没变,只是接口参数变了。代码如下:package com.xxx.xxx;import java.time.LocalDateTime;i._如何通过程序收发微信信息

java 微信公众号支付demo 微信企业支付到个人用户、微信公众号企业付款到个人零钱,微信提现到零钱_企业付款零钱 返回空 demo-程序员宅基地

文章浏览阅读4.1k次。微信提现到零钱(微信内部交易,不需要手续费)价格格式错误:可能是价格经过计算后.doubleValue了一下 最后价格是 200.00 企业付款签名错误:和支付的时候签名的参数有出入(搞了半天,最后到看了一段php代码后做了一下调整。OK了)参考PHP博客:http://blog.csdn.net/sinat_35861727/article/details/72843383Map&lt;S..._企业付款零钱 返回空 demo

面向智能任务的语义通信:理论、技术和挑战_语义通信的研究现状-程序员宅基地

文章浏览阅读2k次。面向智能任务的语义通信:理论、技术和挑战_语义通信的研究现状