vue初学,选择器数据绑定失败

clipboard.png

<el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1">
                            <a>我发出的工单</a>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <a>我收到的工单</a>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <a>个人信息</a>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <a>联系人</a>
                        </el-menu-item>
                    </el-menu>
                    <div class="line"></div>

                    <span slot="title">状态</span>
                    <el-select v-model="state" placeholder="请选择工单状态">
                        <el-option
                                v-for="item in state"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <span slot="title">分类</span>
                    <el-select v-model="sort" placeholder="请选择工单类别">
                        <el-option
                                v-for="item in sort"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <el-date-picker
                            v-model="value7"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions2">
                    </el-date-picker>
<script>
    export default {
        data() {
            return {
                state: [{
                    value: '0',
                    label: '全部工单'
                }, {
                    value: '1',
                    label: '未处理'
                }, {
                    value: '2',
                    label: '处理中'
                }, {
                    value: '3',
                    label: '已处理'
                }, {
                    value: '4',
                    label: '已结单'
                }],
                sort: [{
                    value: '0',
                    label: '全部工单'
                }, {
                    value: '1',
                    label: '文案类'
                }, {
                    value: '2',
                    label: '设计类'
                }, {
                    value: '3',
                    label: '开发类'
                }, {
                    value: '4',
                    label: '采购类'
                }, {
                    value: '4',
                    label: '其他类'
                }],


                //日期选择器
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value6: '',
                value7: '',

                //表格数据
                tableData: [{
                    orderNum: '1',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.02.28 02:33',
                    endTime:'2017.02.28 02:33 临近截止'
                }, {
                    orderNum: '1',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.02.28 02:33',
                    endTime:'2017.02.28 02:33 临近截止'
                }, {
                    orderNum: '1',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.02.28 02:33',
                    endTime:'2017.02.28 02:33 临近截止'
                }, {
                    orderNum: '1',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.02.28 02:33',
                    endTime:'2017.02.28 02:33 临近截止'
                }]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(row) {
                console.log(row);
            }
        }
    }
</script>

clipboard.png

请问是什么问题呢??

阅读 3.7k
2 个回答

v-model="sortSelected"绑定的值重新声明一个变量

<el-select v-model="sort" placeholder="请选择工单类别">
                        <el-option
                                v-for="item in sort"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    
                    
                    
                    
                    data(){
                    return{
                    sortSelected:''
                    }
                    }
新手上路,请多包涵

select的v-model应该重新定义一个属性去绑定,status只是用来生成option的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题