iview之Select组件的坑

今天在使用Iview中的Select组件的时候又遇到坑了，在From里面使用validator对 Select组件进行校验的时候，我明明有值，但是却是显示为空，废话不多说，先贴一波代码 考验大家火眼金睛的时候到了，三个Select组件都是校验失败的

Form(ref="addForm", :model="modalObj.create.form", :label-width="110", :rules="modalObj.create.createRules")
    FormItem(label="所属", prop="company")
        Input(class="filter-wrap", v-model="modalObj.create.form.company", placeholder="请输入")
    FormItem(label="类型", prop="type")
        Select(class="filter-wrap", v-model="modalObj.create.form.type", placeholder="请输入")
            Option(v-for="item in modalObj.type", :key="item.value", :label="item.label", :value="item.value")
    FormItem(label="lll", prop="objType")
        Select(class="filter-wrap", v-model="modalObj.create.form.objType")
            Option(v-for="item in modalObj.objTypes", :key="item.value", :label="item.label" :value="item.value")
    FormItem(label="授权", prop="isIpv6")
        Select(class="filter-wrap", v-model="modalObj.create.form.isIpv6")
            Option(v-for="item in modalObj.isIronics", :key="item.value", :label="item.label" :value="item.value")
    FormItem(label="授权", prop="isIronic")
        Select(class="filter-wrap", v-model="modalObj.create.form.isIronic")
            Option(v-for="item in modalObj.isIronics", :key="item.value", :label="item.label" :value="item.value")
    FormItem(label="管理", prop="name")
        Input(class="filter-wrap", v-model="modalObj.create.form.name", placeholder="管理")
    FormItem(label="管理", prop="id")
        Input(class="filter-wrap", v-model="modalObj.create.form.id", placeholder="请输入")
    FormItem(label="号码", prop="phoneNumber")
        Input(class="filter-wrap", v-model="modalObj.create.form.phoneNumber", placeholder="请输入号码")
    FormItem(label="邮箱", prop="email")
        Input(class="filter-wrap", v-model="modalObj.create.form.email", placeholder="请输入邮箱")

data: {
    objTypes: [
        {
            label: '普通网络',
            value: 1
        },
        {
            label: '高速网络',
            value: 2
        }
    ],
    isIronics: [
        {
            label: '否',
            value: 0
        },
        {
            label: '是',
            value: 1
        }
    ],
    modalObj.create.form: {
        company: '',
        type: '',
        objType: 1,
        isIronic: 0,
        isIpv6: 0,
        name: '',
        id: '',
        phoneNumber: '',
        email: ''
    },
    createRules: {
        company: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请选择', trigger: 'blur' }],
        objType: [
            { required: true, message: '请选择', trigger: 'blur' }
        ],
        isIronic: [
            { required: true, message: '请选择', trigger: 'blur' }
        ],
        isIpv6: [
            {
                required: true,
                message: '请选择',
                trigger: 'blur'
            }
        ],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { validator: validatorId, trigger: 'blur' }
        ],
        phoneNumber: [
            { required: true, message: '请输入', trigger: 'blur' },
            { validator: validatorPhone, trigger: 'blur' }
        ],
        email: [{ validator: validatorEmail, trigger: 'blur' }]
    },
}

大家可以看到，我们的select里面明明有值啊，为上面还会显示请输入呢，我们可以看到已经飘红了，此时不得不说我又掉进坑里面了

解密

原来Select组件所绑定的值只支持String类型的值,上面我们可以看到，我们传的是Int类型的数值，所以表单校验是没有通过的，不得不说啊，一不小心就掉坑里了，前端坑太多，爬完一个又接一个啊。哈哈