快捷導(dǎo)航

vue的el-select綁定的值無(wú)法選中el-option問(wèn)題及解決

更新時(shí)間：2022年09月05日 09:32:25 作者：豐色木夕

這篇文章主要介紹了vue的el-select綁定的值無(wú)法選中el-option問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-select綁定的值無(wú)法選中el-option問(wèn)題

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

代碼如下：

<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
}

vue el-select 2個(gè)下拉框聯(lián)動(dòng)時(shí)產(chǎn)生的無(wú)法選中值的bug

問(wèn)題描述

做項(xiàng)目時(shí)用了2個(gè)el-select下拉框，一個(gè)下拉框選擇學(xué)校，一個(gè)下拉框選擇專業(yè)，專業(yè)的數(shù)據(jù)源是根據(jù)學(xué)校的選擇來(lái)動(dòng)態(tài)改變的，由于后臺(tái)沒(méi)有寫(xiě)成樹(shù)的形式，所以寫(xiě)了2個(gè)下拉框進(jìn)行聯(lián)動(dòng)。

這里就有一個(gè)問(wèn)題：學(xué)校改變后，雖然專業(yè)的數(shù)據(jù)源發(fā)生了變化，但是原來(lái)的專業(yè)綁定值并沒(méi)有清空，所以我在此就手動(dòng)清空了專業(yè)的值。

這是就有了這個(gè)奇怪的問(wèn)題，學(xué)校改變后，原來(lái)的專業(yè)綁定值雖然清空了，但是卻無(wú)法選中了。

解決辦法1：使用 this.$set 來(lái)設(shè)置變量的值，讓視圖重新render

在學(xué)校的值改變時(shí)，清空原專業(yè)值時(shí)用$set()，而不是直接賦值為空。

schoolChange (value) {
? ? // this.form.specialtyid=''
? ? this.$set(this.form, 'specialtyid', '')
? ??
? ? if (!value) {
? ? ? this.specialtyList = []
? ? } else {
? ? ? this.GetspecialtynList(value)
? ? }
},

解決辦法2：直接聲明specialtyid變量

另一種解決辦法，就是將specialtyid的值，直接寫(xiě)到data里，el-select綁定值也直接使用specialtyid,而不是使用form.specialtyid，此時(shí)再清空specialtyid的值就可以直接賦值了

解決辦法3：給專業(yè)的el-select添加@change事件

? ? ? ? <el-select v-model="form.specialtyid" @change="specChange">
? ? ? ? ? ? <el-option
? ? ? ? ? ? ? v-for="item in specialtyList"
? ? ? ? ? ? ? :label="item.orgname"
? ? ? ? ? ? ? :key="item.orgid"
? ? ? ? ? ? ? :value="item.orgid"
? ? ? ? ? ? ></el-option>
? ? ? ? </el-select>
? ??
? ? ? ? specChange () {
? ? ? ? ? //強(qiáng)制刷新
? ? ? ? ? this.$forceUpdate()
? ? ? ? },

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

您可能感興趣的文章: