View UI （iview） select 标签选中值，重置为空后，值为 undefined

清疚 2023-03-02 14:52 26阅读 0赞

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

![20200729210302599.gif][]

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

![2020072921063981.gif][]

**解决办法：**笔者在网上查找相关内容，发现很多人也遇到了同样的情况，最后在  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>

运行如下

![20200729212231408.gif][]

**参考文档：**[https://github.com/view-design/ViewUI/issues/446][https_github.com_view-design_ViewUI_issues_446]

[20200729210302599.gif]: /images/20230208/13d46bb3ea814be8861f48c78721d33f.png
[2020072921063981.gif]: /images/20230208/047a0b397e3c427c98a708b99ebdfabb.png
[20200729212231408.gif]: /images/20230208/0667b4e9b5764c49bbe6037512e83dc5.png
[https_github.com_view-design_ViewUI_issues_446]: https://github.com/view-design/ViewUI/issues/446