【Vue下拉框只获取值如何获取名称并绑定前端列的解决方案】

本人详解
作者：王文峰，参加过 CSDN 2020年度博客之星，《Java王大师王天师》
公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题
中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯 山峯
转载说明：务必注明来源（注明：作者：王文峰哦）

学习教程（传送门）

1、掌握 JAVA入门到进阶知识(持续写作中……）
2、学会Oracle数据库用法(创作中……）
3、手把手教你vbs脚本制作(完善中……）
4、牛逼哄哄的 IDEA编程利器(编写中……）
5、吐血整理的 面试技巧(更新中……）

Vue下拉框只获取值如何获取名称并绑定前端列的解决方案

在Vue开发中，我们常常遇到这样的场景：下拉框(Select)需要显示名称(name)供用户选择，但实际需要获取的是对应的值(value)。更常见的需求是，在表格等数据展示组件中，需要根据选择的值显示对应的名称，而不仅仅是值本身。

本文将详细介绍几种解决方案，帮助你在Vue项目中实现下拉框选择值但能获取并显示对应名称的需求。

问题分析

通常，我们的下拉框结构是这样的：

<select v-model="selectedId">
  <option v-for="item in options" :key="item.id" :value="item.id">{
  
  { item.name }}</option>
</select>

此时，selectedId变量只会保存选中项的id值，但如果我们想在页面其他地方显示选中的名称，就需要通过id找到对应的name。

解决方案

方案一：通过计算属性实现名称查找

这是最常用的方法，通过一个计算属性根据当前选中的id查找对应的name。

export default {
   
   
  data() {
   
   
    return {
   
   
      selectedId: '',
      options: [
        {
   
    id: 1, name: '选项一' },
        {
   
    id: 2, name: '选项二' },
        {
   
    id: 3, name:<