element-ui使用from表單驗證資料問題

木木BO發表於2020-12-21

from表單:

<div id="myDiv">
    <el-form ref="form" :model="student" label-width="80px">
        <el-form-item label="學生編號">
            <el-select v-model="student.id" placeholder="請選擇">
                <el-option
                        v-for="stu in studentList"
                        :key="stu.name"
                        :value="stu.id">
                    <span style="float: left">{{ stu.id }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ stu.name }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="學生姓名">
            <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="學生性別">
            <el-radio v-model="student.sex" label="男">男</el-radio>
            <el-radio v-model="student.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="學生年齡">
            <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="出生年月">
            <el-col :span="24">
                <el-date-picker type="date" placeholder="選擇日期" v-model="student.birthday"
                                style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">確定</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>

JavaScript程式碼:

<script>
    const myModel = {
        student: {
            id:'',
            name: '',
            sex: '',
            age: '',
            birthday: ''
        },
        sex: [{
            id: 1,
            name: '男'
        }, {
            id: 2,
            name: '女'
        }]
    };
    new Vue({
        el: "#myDiv",
        data: myModel,
        methods:{
            onSubmit(){
                console.log( myModel.student );
                //後續可以通過ajax或者axios和後端進行資料互動
            }
        }
    })
</script>

注意:注意事件中的列印console.log( myModel.student );

它列印的結果是和表單中填入的資料一致:
填入的資料:
在這裡插入圖片描述
控制檯列印的資料:
既然能拿到表單中的資料,後續懂的都懂
在這裡插入圖片描述

相關文章