vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的解決

更新時(shí)間：2022年07月26日 09:08:19 作者：大橙子_L

這篇文章主要介紹了vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、問(wèn)題描述

使用el-select組件綁定類(lèi)型為對(duì)象時(shí)，回顯內(nèi)容始終為選項(xiàng)的最后一項(xiàng)，但是通過(guò)控制臺(tái)打印的信息卻是所選項(xiàng)。

使用代碼：

<template>
? <div class="page-index">
? ? <el-form
? ? ? :model="ruleForm"
? ? ? :rules="rules"
? ? ? ref="ruleForm"
? ? ? label-width="100px"
? ? >
? ? ? <el-form-item label="食物名稱(chēng)" prop="food">
? ? ? ? <el-select
? ? ? ? ? v-model="ruleForm.food"
? ? ? ? ? placeholder="請(qǐng)選擇食物"
? ? ? ? ? @change="handleChange"
? ? ? ? >
? ? ? ? ? <el-option
? ? ? ? ? ? v-for="food in foodOptions"
? ? ? ? ? ? :key="food.id"
? ? ? ? ? ? :label="food.name"
? ? ? ? ? ? :value="food"
? ? ? ? ? ></el-option>
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? ruleForm: {
? ? ? ? food: {}
? ? ? },
? ? ? foodOptions: [
? ? ? ? {
? ? ? ? ? id: "食物1",
? ? ? ? ? name: "黃金糕"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "食物2",
? ? ? ? ? name: "雙皮奶"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "食物3",
? ? ? ? ? name: "蚵仔煎"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "食物4",
? ? ? ? ? name: "龍須面"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "食物5",
? ? ? ? ? name: "北京烤鴨"
? ? ? ? }
? ? ? ],
? ? ? rules: {
? ? ? ? food: [{ required: true, message: "請(qǐng)選擇具體食物", trigger: "blur" }]
? ? ? }
? ? };
? },
? methods: {
? ? handleChange(food) {
? ? ? console.log(food.name);
? ? }
? }
};
</script>

選項(xiàng)圖示：

顯示錯(cuò)誤圖示：

實(shí)際選擇了蚵仔煎，回顯的內(nèi)容卻是北京烤鴨，但日志打印出的是蚵仔煎，是正確的。

二、原因分析和解決方法

官網(wǎng)上有說(shuō)明，若綁定值為對(duì)象類(lèi)型時(shí)，必須指定value-key，作為 value 唯一標(biāo)識(shí)的鍵名。所以只需在el-select中增加value-key即可。

修改后el-select使用代碼：

<el-select
    v-model="ruleForm.food"
    placeholder="請(qǐng)選擇食物"
    value-key="id"
    @change="handleChange"
>
    <el-option
    v-for="food in foodOptions"
    :key="food.id"
    :label="food.name"
    :value="food"
    ></el-option>
</el-select>

三、總結(jié)

好好看官方文檔?。?！

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

您可能感興趣的文章:

相關(guān)文章

vue使用element-resize-detector監(jiān)聽(tīng)元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽(tīng)元素寬度變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Ant?Design?of?Vue的樹(shù)形控件Tree的使用及說(shuō)明
這篇文章主要介紹了Ant?Design?of?Vue的樹(shù)形控件Tree的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue淺拷貝和深拷貝實(shí)現(xiàn)方案
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實(shí)現(xiàn)方案及區(qū)別對(duì)比分析,需要的朋友可以參考下
2023-03-03
vue2 webpack proxy與nginx配置方式
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue開(kāi)發(fā)中出現(xiàn)Loading?Chunk?Failed的問(wèn)題解決
本文主要介紹了Vue開(kāi)發(fā)中出現(xiàn)Loading?Chunk?Failed的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue+webpack 打包文件 404 頁(yè)面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁(yè)面空白的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue獲取微博授權(quán)URL代碼實(shí)例
這篇文章主要介紹了Vue獲取微博授權(quán)URL代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
vue使用threeJs導(dǎo)入obj模型并實(shí)現(xiàn)添加標(biāo)注
這篇文章主要介紹了vue使用threeJs導(dǎo)入obj模型并實(shí)現(xiàn)添加標(biāo)注方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue組件傳遞對(duì)象中實(shí)現(xiàn)單向綁定的示例
下面小編就為大家分享一篇vue組件傳遞對(duì)象中實(shí)現(xiàn)單向綁定的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02