vue.js - iview表单验证在使用v-for的时候验证出错。

问题描述

问 题

我是用v-for循环渲染了option后，表单验证一直出错，之后我把数据直接加在HTML中后验证又正常了，这是为什么？是因为bug还是我用的方式不对？

---

HTML代码部分：

<div id="app">
    <i-form id="form" :rules="ruleValidate" ref="formItem" :model="formItem">
        <Form-item label="楼宇" prop="building">
            <i-select v-model="formItem.building" placeholder="请选择">
                <i-option v-for="el in formItem.buildingEl" :value="el.value">{{el.text}}</i-option>
            </i-select>
        </Form-item>
    </i-form>
</div>

---

js部分：

_app = new Vue({
    el:"#app",
    data:{
        formItem:{
            building:"",
            buildingEl:[
                {value:1,text:"yi"},
                {value:2,text:"er"},
                {value:3,text:"san"},
            ],
        },
        ruleValidate:{
            building: [
                { required: true,message: '必须选择楼宇', trigger: 'change' }
            ]
        }
    },
})

解决方案

iview内部用async-validator: https://github.com/yiminghe/a...

默认校验数据为string类型的，然而你这个select用的value是number类型的,所以修改如下(校验添加type):

 ruleValidate:{
        building: [
            { type: 'number', required: true, message: '必须选择楼宇', trigger: 'change' }
        ]
  }

这篇关于vue.js - iview表单验证在使用v-for的时候验证出错。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！