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

御坂御坂
  • 157

我是用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' }
            ]
        }
    },
})
回复
阅读 5.9k
1 个回答
✓ 已被采纳

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

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

 ruleValidate:{
        building: [
            { type: 'number', required: true, message: '必须选择楼宇', trigger: 'change' }
        ]
  }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏