<template>
? <div class="page-index">
? ? <el-form
? ? ? :model="ruleForm"
? ? ? :rules="rules"
? ? ? ref="ruleForm"
? ? ? label-width="100px"
? ? >
? ? ? <el-form-item label="食物名稱" prop="food">
? ? ? ? <el-select
? ? ? ? ? v-model="ruleForm.food"
? ? ? ? ? placeholder="請選擇食物"
? ? ? ? ? @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: "請選擇具體食物", trigger: "blur" }]
? ? ? }
? ? };
? },
? methods: {
? ? handleChange(food) {
? ? ? console.log(food.name);
? ? }
? }
};
</script>

選項(xiàng)圖示：

顯示錯(cuò)誤圖示：

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

二、原因分析和解決方法

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

修改后el-select使用代碼：

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