iview form表单校验出错

先看出错的代码：

<template>
  <Modal width="25%" v-model="modal_visibleState" :mask-closable="false" >
    <p slot="header">
      <Icon type="information-circled"></Icon>
      <span>选择学期</span>
    </p>
     <Form v-model="semesterForm" ref="semesterForm" :rules="ruleValidate"  :label-width="100" label-position="right"> 
        <Row :gutter="16">
            <Col span="16">
                <FormItem label="开课学期" prop="semesterCode"> 
                <Select v-model="semesterForm.semesterCode" >
                    <Option v-for="item in semesterList" :value="item.code" :key="item.code" >{{ item.name }}</Option>
                </Select>
                </FormItem>
            </Col>
        </Row> 
       </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button @click="ok" type="primary">确定</Button>
      </div>
    </Modal>
</template>

<script> 

import {getCanArrangeCourseSemesterListApi} from "@/api/graduate-training/course-arrange-paike.js";

export default {
    data() {
        return {
            modal_visibleState:false,
            semesterList: [],//学期下拉
            semesterForm:{
                semesterCode:''
            },
            ruleValidate: {
                semesterCode: [
                    { required: true, message: '学期不可为空', type:'string',trigger: 'change' }
                ]
            }
        }
    },
    methods: {
            initData(){
               
            },
            getSemesterList() {
                getCanArrangeCourseSemesterListApi(this.arrangeCourseCate).then(res => {
                    if (res.success) {
                    this.semesterList = res.data;
                    }
                });
            },
            close() {
                this.$emit("refresh-parent-data");
                this.modal_visibleState=false;
            },
            cancel(){
                this.modal_visibleState=false;
            },
            ok(){
                this.$refs.semesterForm.validate((valid) => {
                    if (valid) {
                        //.....
                    }
                })
            }
    },
    watch: {
        modal_visibleState(val) {
            if (val) {
                this.initData();
                this.getSemesterList();
            }
        }
    }
}
</script>

问题时，选择了上了学期后，校验老是说学期不可为空：

 

 瞅着自己写的代码和官网的实例对比了108遍，我都没发现问题在哪儿，都开始怀疑自己座位的风水不好了~~~当然是开玩笑。。。

结果今天又开机查看错误，和官网一个字母一个字母的对比，终于发现了问题：

<Form>的model绑定方式是 :model     而不是v-model,改成   :model   之后，问题果然解决了 ~