<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)無法自動選中紅色，而是直接顯示2，這是什么問題呢。

原來是obj2Array這個方法的問題，在重構為數(shù)組時，key是字符直接給到id，而colorId是數(shù)值，所以無法匹配。

正解：

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

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

您可能感興趣的文章:

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