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   之后，問題果然解決了 ~