<template>
?<el-select v-model="formData.colorId" placeholder="選擇">
? ?<el-option
? ? ?v-for="item in colorOptions"
? ? ?:key="item.id"
? ? ?:label="item.name"
? ? ?:value="item.id">
? ?</el-option>
?</el-select>
<template>

<script>
colors = {
?"1": "黃",
?"2": "紅",
?"3": "綠"
}
export default {
? data() {
? ?? ?return {
? ?? ??? ?formData:{ colorId: 2 },
? ?? ??? ?colorOptions: obj2Array(colors)
?? ?}
? }
}
function obj2Array(obj){
? const arr = []
? for(let key in obj){
? ? arr.push({id:key, name: obj[key]})
? }
? return arr
}
</script>

發(fā)現(xiàn)無(wú)法自動(dòng)選中紅色，而是直接顯示2，這是什么問(wèn)題呢。

原來(lái)是obj2Array這個(gè)方法的問(wèn)題，在重構(gòu)為數(shù)組時(shí)，key是字符直接給到id，而colorId是數(shù)值，所以無(wú)法匹配。

正解：

function obj2Array(obj){
? const arr = []
? for(let key in obj){
? ? arr.push({id:Number(key), name: obj[key]})
? }
? return arr
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 自定義右鍵樣式的實(shí)例代碼
這篇文章主要介紹了vue 自定義右鍵樣式的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解,需要的朋友可以參考下
2019-05-05
vue.js中指令Directives詳解
這篇文章主要為大家詳細(xì)介紹了vue.js中指令Directives，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue中keep-alive多級(jí)路由緩存問(wèn)題
本文主要介紹了vue中keep-alive多級(jí)路由緩存問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)
這篇文章主要介紹了vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2021-01-01
vue3?邏輯復(fù)用的實(shí)現(xiàn)示例
在項(xiàng)目開發(fā)中,有兩個(gè)功能特別類似,如果單獨(dú)實(shí)現(xiàn),會(huì)有很多重復(fù)的代碼，這時(shí)候就會(huì)用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-02-02
vue3前端獲取文件的絕對(duì)路徑問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問(wèn)題解決的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
vue插槽slot的簡(jiǎn)單理解與用法實(shí)例分析
這篇文章主要介紹了vue插槽slot的簡(jiǎn)單理解與用法,結(jié)合實(shí)例形式分析了vue插槽slot的功能、原理、相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04