vue里面的el-select綁定默認(rèn)值方式

更新時(shí)間：2022年09月02日 10:26:01 作者：真狠白的小白

這篇文章主要介紹了vue里面的el-select綁定默認(rèn)值方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue的el-select綁定默認(rèn)值

vue select下拉框綁定默認(rèn)值：

首先option要加value值，以便v-model可以獲取到對應(yīng)選擇的值

一、當(dāng)沒有綁定v-model，直接給對應(yīng)的option加selected屬性

二、當(dāng)給select綁定了v-model的值的時(shí)候，要給v-model綁定的data值里寫默認(rèn)值

el-select綁定的值無法選中el-option問題

框架vue-element-ui中的select綁定值v-model無法自動(dòng)選中option的問題

代碼如下：

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

原來是obj2Array這個(gè)方法的問題，在重構(gòu)為數(shù)組時(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
}

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

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼
本文主要介紹了vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vuejs+vue-router打包+Nginx配置的實(shí)例
今天小編就為大家分享一篇Vuejs+vue-router打包+Nginx配置的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue子組件通過.sync修飾符修改props屬性方式
這篇文章主要介紹了vue子組件通過.sync修飾符修改props屬性方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法
問題來源是因?yàn)槲业拈_源項(xiàng)目Maple-Boot項(xiàng)目的網(wǎng)站前端,因?yàn)轫?xiàng)目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁會(huì)根據(jù)不同的菜單進(jìn)行渲染不同的路由,本文降介紹Vue3動(dòng)態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下
2024-07-07
Vue開發(fā)環(huán)境跨域訪問問題
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
vue2組件實(shí)現(xiàn)懶加載淺析
本篇文章主要介紹了vue2組件實(shí)現(xiàn)懶加載淺析,運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力.
2017-03-03
vue中eslintrc.js配置最詳細(xì)介紹
這篇文章主要介紹了vue中eslintrc.js配置最詳細(xì)介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細(xì)介紹了Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決的相關(guān)資料,公司項(xiàng)目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個(gè)高頻錯(cuò)誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下
2023-09-09
Vue 嵌套路由使用總結(jié)（推薦）
這篇文章主要介紹了Vue 嵌套路由使用總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01