vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

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

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>

三、总结

好好看官方文档！！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • Vue select 绑定动态变量的实例讲解

    概述 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定.所以通过数据的id或者下标进行变量拼接.页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code <div v-for="(item, index) in tagAllDate" :key="index"> <el-form-item :label="item.name"> <el-sel

  • vue中v-model对select的绑定操作

    1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    目录 一.问题描述 二.原因分析和解决方法 三.总结 el-select绑定对象时,回显内容始终是最后一项 一.问题描述 使用el-select组件绑定类型为对象时,回显内容始终为选项的最后一项,但是通过控制台打印的信息却是所选项. 使用代码: <template>   <div class="page-index">     <el-form       :model="ruleForm"       :rules="rul

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

  • 解决layui 三级联动下拉框更新时回显的问题

    最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change'); }); 这里面有个问题就是 选择的时候 如果 请选择 的value 是"" 空字符串,当选择从河北省变到请选择时不会触发这个监听事件 <script type="text/javaS

  • java中下拉框select和单选按钮的回显操作

    前提: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 1.下拉框select <select name="departmentId" id="departmentId"> <option value="0">请选择部门</option> <c:forEach items=&

  • 浅谈vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

  • vue中wangEditor的使用及回显数据获取焦点的方法

    vue中wangEditor的使用及回显数据获取焦点的方法

    在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,非常好用 第一步安装 npm i wangeditor --save 第二步在项目中使用 html 页面中的编辑.添加布局在最下面 <div id="div1"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <el-button type="primary" @cl

  • vue+element开发使用el-select不能回显的处理方案

    vue+element开发使用el-select不能回显的处理方案

    目录 使用el-select不能回显的处理 el-select编辑数据不回显问题 使用el-select不能回显的处理 下拉框选择的时候,选不上下拉框的值,element提供了@change事件使用vm.$forceUpdate() 方法进行强制刷新,就可以把值渲染上去. $forceUpdate() <el-select v-model="price" clearable placeholder="请选择" @change="$forceUpdat

  • Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录. 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考. 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了.怎么办?当然是自己动手丰衣足食啦

  • vue+springboot上传文件、图片、视频及回显到前端详解

    目录 效果图 设计逻辑 数据库表 前端vue html js代码 前端思路 储存文件信息 上传文件对象 后端上传下载代码 完整代码 workinfo.vue SubmitHomeworkController 总结 效果图 预览: 设计逻辑 数据库表 前端vue html <div class="right-pannel"> <div class="data-box"> <!--上传的作业--> <div style=&quo

  • Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题

    今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回

随机推荐