Vue框架在项目开发中如何实现组件的复用？

本文共计696个文字，预计阅读时间需要3分钟。

目录

一、问题描述

二、原因分析和解决方案

三、总结

一、问题描述

在使用el-select组件绑定对象时，如何回显内容从开始到最后的一项？

二、原因分析和解决方案

1.问题描述

在使用el-select组件绑定对象时，回显内容从开始到最后的一项，可能是因为组件的value属性绑定到了对象的最后一个值。

2. 解决方案修改el-select组件的value属性，使其绑定到对象的第一个值，从而实现从开始到最后的一项的回显。

三、总结通过将el-select组件的value属性绑定到对象的第一个值，可以解决回显内容从开始到最后的一项的问题。

目录

• 一、问题描述
• 二、原因分析和解决方法
• 三、总结

el-select绑定对象时，回显内容始终是最后一项

一、问题描述

使用el-select组件绑定类型为对象时，回显内容始终为选项的最后一项，但是通过控制台打印的信息却是所选项。

使用代码：

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

选项图示：

显示错误图示：

实际选择了蚵仔煎，回显的内容却是北京烤鸭，但日志打印出的是蚵仔煎，是正确的。

二、原因分析和解决方法

官网上有说明，若绑定值为对象类型时，必须指定value-key，作为 value 唯一标识的键名。所以只需在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>

三、总结

好好看官方文档！！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。