关于 vuejs + element-ui 中 el-select 表单提交值错误的问题？

Question

问题描述

关于 vuejs + element-ui 中 el-select 表单提交值错误的问题？
el-select 中 name="" 表单 后端接受到的是 label 而不是 value
在input 中就是正常的！

如图 state1 就是正确的 state2 就是不正确的

相关代码

`

                <el-form-item label="班级状态">
                    {{viewData.updateClassForm.state}}
                    <input type="hidden" name="state" v-model="viewData.updateClassForm.state">
                    <el-select  v-model="viewData.updateClassForm.state" placeholder="请选择" @change="submitFunc">
                        <el-option v-for="item in viewData.classState" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>

`
`

            updateClassForm: {
                filter_course: '',
                class_name: '',
                teacher_uid: '',
                state: '',
                dialogVisible: false,
            },

`

`

    <el-dialog title="编辑班级" :visible.sync="viewData.updateClassForm.dialogVisible" width="50%">
        <div>
            <el-form class="ajax-form" method="post" action="{:U('College/App/ManagementBehavior/updateClass')}"  label-width="80px" >
                <input type="hidden" name="classlid" v-model="viewData.updateClassForm.classlid">
                <el-form-item label="所属课程">
                    <input type="hidden" name="filter_course" v-model="viewData.updateClassForm.filter_course">
                    <el-select  value-key="courseid" v-model="viewData.updateClassForm.filter_course" placeholder="请选择">
                        <el-option v-for="item in viewData.courseList" :key="item.value" :label="item.name" :value="item.courseid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称">
                    <el-input name="class_name" v-model="viewData.updateClassForm.class_name" placeholder="班级名称"></el-input> 
                </el-form-item>
                <el-form-item label="老师">
                    <input type="hidden" name="teacher_uid" v-model="viewData.updateClassForm.teacher_uid">
                    <el-select v-model="viewData.updateClassForm.teacher_uid" multiple placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in viewData.teacherList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级状态">
                    {{viewData.updateClassForm.state}}
                    <input type="hidden" name="state" v-model="viewData.updateClassForm.state">
                    <el-select  v-model="viewData.updateClassForm.state" placeholder="请选择" @change="submitFunc">
                        <el-option v-for="item in viewData.classState" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button native-type="submit" type="primary" >更改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>

`

`

        viewData: {
            classState: [{
              value: '0',
              label: '未开班'
            }, {
              value: '1',
              label: '开班中'
            }, {
              value: '2',
              label: '已结班'
            }],


            teacherList: [{
              value: '10051',
              label: '老师 1'
            }, {
              value: '10052',
              label: '老师 2'
            }, {
              value: '10053',
              label: '老师 3'
            }, {
              value: '10054',
              label: '老师 4'
            }, {
              value: '10055',
              label: '老师 5'
            }],

            courseList: {$course_list_json},  // 课程列表
            classList: {$class_list_json}, // 班级列表
            addClassForm: {
                filter_course: '',
                class_name: '',
                teacher_uid: '',
                state: '',
                dialogVisible: false,
            },
            updateClassForm: {
                filter_course: '',
                class_name: '',
                teacher_uid: '',
                state: '',
                dialogVisible: false,
            },
            managementStudentForm: {
                dialogVisible: false,
            }
        },

`

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

你写错了
input
el-select 监听的都是v-model

参考：
v-model="state" // state 写你自己data中定义的 option绑定的数组写你需要的 以这个案例做参考