element-ui el-select选择数据问题

Question

 <el-select v-model="value" @change="currentSel" placeholder="选择分类">
        <el-option v-for="item in options1" :key="item.value" :label="item.parentId" :value="item.labelName"></el-option>
 </el-select>

数据结构

 [
    {
        "id": 1,
        "labelName": "配饰",
        "labelContent": null,
        "labelRemark": null,
        "parentId": 1
    },
    {
        "id": 2,
        "labelName": "首饰",
        "labelContent": null,
        "labelRemark": null,
        "parentId": 2
    },
    {
        "id": 3,
        "labelName": "耳环",
        "labelContent": null,
        "labelRemark": null,
        "parentId": 3
    }
]

回调方法

currentSel(selVal){
    this.selVal = selVal;
    console.log(selVal)
},

怎么让我选择配饰时selVal打印1，首饰selVal打印2。也就是对应parentId的值

Answer 1

:label :value2个字段反了吧

Answer 2

把label跟value绑定的值对调

 <el-select v-model="selVal" @change="currentSel" placeholder="选择分类">
        <el-option v-for="item in options1" :key="item.value" :label="item.labelName" :value="item.parentId"></el-option>
 </el-select>

在函数里面获取这个下拉框的v-model的值

currentSel(){
    //把selVal作为整个下拉框的v-model绑定值就能直接获得
    console.log(this.selVal)
},

Answer 3

<el-select v-model="selVal" @change="currentSel" placeholder="选择分类">

    <el-option v-for="item in options1" :key="item.parentId" :label="item.labelName" :value="item.parentId"></el-option>

</el-select>