element ui select 踩坑

今天用element ui 的select組件回顯數據時沒法正確匹配。

具體示例爲：options爲對象，對象的屬性爲value（number類型），屬性值爲label

代碼以下：

<template>

<el-select v-model="value" placeholder="請選擇">

<el-option :label="item" :value="index" v-for="(item, index) in options" :key="index"> </el-option>

</el-select>

</template>

<script>

export default {

data() {

return {

options: { 1: 字母A, 2: 字母B }, value: '' }

}

}

</script>

因爲select組件默認將傳過來的value設置爲String類型，所以若直接這樣寫，數據沒法匹配。選擇器顯示的值會變爲字符串的數字，並無匹配到對應的屬性值。（選擇器對數據的顯示就是若匹配到對應的value會顯示相應的label；若沒有匹配到，顯示的是該value）。

所以若要該類數據正確顯示，須要在獲取到選擇器應該顯示的value以後，將value變爲String類型。這樣才能夠正確顯示。