Vue中使用 iview 之-踩坑日记

一、iview表单验证Select标签验证一直不通过的问题(或者使用v-for创建 iview初用者一般总会遇到这个问题)

先看下基本案例：

//template中
            <Select v-model="formValidate.city" placeholder="Select your city">
                <Option v-for="item in selectList" :value="item.value">{{item.label}}</Option>
            </Select>

//遍历的数组信息
selectList:[
　　{
　　　　value:0,
　　　　label:'北京'
　　},
　　{
　　　　value:1,
　　　　label:'上海'
　　},
　　{
　　　　value:2,
　　　　label:'广州'
　　}
]

//表单验证
{ required: true, message: 'Please select the city', trigger: 'change' }

　　

　　完整案例地址：https://run.iviewui.com/ySGFAEoH

　　上面的案例不管如何选择，它都会报错，为什么会一直报错呢？代码看起来也没有问题！！！

　　在iview中默认校验value数据类型为String，上面的出现的问题就是因为value的类型为Number,所以才会一之出错；

　　解决办法有两种：

　　1、把value的类型改成String 点击跳转到此案例demo

 1       selectList:[
 2         {
 3           value:'0',
 4           label:'北京'
 5         },
 6         {
 7           value:'1',
 8           label:'上海'
 9         },
10         {
11           value:'2',
12           label:'广州'
13         }
14       ],

 　　2、修改表单验证的类型　　点击跳转到此案例demo

1 //添加 type:'number'
2 { type:'number',required: true, message: 'Please select the city', trigger: 'change' }