vue 使用el-option标签解决不回显的问题

2023-11-16

一、问题描述

<el-form-item label="类型" >
                <el-select v-model="form.type" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
options:[
                    {
                        value: '1',
                        label: '藏品',
                    },
                    {
                        value: '2',
                        label: '盲盒',
                    },
        ]

 当点击编辑按钮后,数据回显失败。

二、原因解析

在options中的value中1、2均为字符串形式,但我们的一行数据row里的typeId属于数据库int类型

此时我们只需当点击编辑按钮后,将typeid 转换成字符串形式即可。

实现如下:

this.form.type = row.type.toString()//解决了前端下拉框不回显示的问题

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 使用el-option标签解决不回显的问题 的相关文章

  • 类型“CombinedVueInstance>>”上不存在属性“XXX”

    我使用 TypeScript 创建了一个 vue 组件 并且在以下位置收到此错误data and in methods Property xxx does not exist on type CombinedVueInstance
  • 超出最大调用堆栈大小 - Vue.js

    我有一个计算方法 可以让我计算产品的总价和折扣值 并希望获得以下值 总计 折扣 cartTotal var total 0 var discount Math round 0 1 this cartTotal 100 100 this ca
  • 在 docker 容器内运行 vite 开发服务器

    我有一个 Vue cli 应用程序 我正在尝试将其转换为 vite 我正在使用 Docker 来运行服务器 我看了几个教程 并让 vite 在开发模式下运行 没有错误 但是 浏览器无法访问该端口 也就是说 当我在 macbook 的命令行上
  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看
  • 我在 firebase.auth.ApplicationVerifier 中遇到问题

    错误发生在signInWithPhoneNumber 的第二个参数中 我无法解决这个问题 我使用了三种方法来发送 otp 验证 otp 和最后用于验证码 methods sendOTP e e preventDefault if this
  • 从vue中的api加载路由

    我正在尝试从我的 API 在 Vue 应用程序中加载路由 我尝试将数据推送到路由变量并使用 addRoutes 方法 但没有运气 我认为异步可能存在问题 但为什么 addRoutes 不起作用 这是我的代码 import Vue from
  • `success` 方法已被弃用。使用“then”方法代替

    您好 我是 Vue 世界的新手 这是我收到的警告 成功方法已被弃用 请改用 then 方法 这是代码 apiURL api movies new Vue el app data movies ready function this getM
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch
  • 观察者不触发

    我正在使用带有选项 API 的 Vue 3 如下面发布的代码所示 在watch对象 我监视发生的变化isToggleBtnLabelDigitizePolygon 在方法中onDigitizePolygon我改变的值isToggleBtnL
  • 使用 vee-validate 在 vue js 中进行验证有错误

    我想在 vuejs 中进行验证 因为我正在使用 vee validate 我的vue js版本是2 6 10 并安装 run npm install vee validate 我在 main ts 中声明 import VeeValidat
  • 覆盖 vuetify 中的 scss 变量

    为了增加 vuetify 的 v switch 的宽度 我想修改 vuetify 的 scss 变量的值 vuetify是通过vue cli配置的 开发的代码如下 src assets css overrides scss font siz
  • 无法安装组件:模板或渲染函数未定义。组件导入失败

    我正在尝试复制 vue 教程示例 在这里找到 https v3 vuejs org guide component basics html passing data to child components with props https
  • 使用 Vue.js 附加 HTML 元素

    所以我对此真的很陌生Vue js我想要实现的目标很简单 我试图附加这个结果Ajax请求进入我的列表 div div
  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo
  • 访问 .js 文件中的 Nuxt 插件

    假设我有一个脚本文件 foo js function doStuff how to access store and other plugins here export default doStuff 如果不将调用组件作为参数传递 我如何访
  • 如何在 Nuxt 中设置 netlify 表单

    当我通过添加带有 a 的链接来使用 vue router 导航到表单时
  • 如何将函数导入到Vue组件中?

    我正在尝试将单个函数导入到我的 Vue 组件中 我为我的函数创建了一个单独的 js 文件 randomId js exports randomId gt My function 在我的 Vue 组件中 我导入了 Random js let
  • Vue 2 转换不起作用

    我不知道我的代码哪里出了问题 这应该是一个简单的过渡 当我单击按钮时 消息显示正确 但只是根本没有发生淡入淡出过渡
  • 将选定的值传递给 vuejs 函数

    如何将选定的值传递给 vuejs 函数 v model我猜不会有帮助 我需要在之后设置过滤器的值item items orderBy sortKey reverse where reverse and sortKey是动态值 html
  • 将组件注册到现有的 Vue.js 实例

    我是 Vue js 新手 我想注册一个本地组件 如下所述 https v2 vuejs org v2 guide components html Local Registration https v2 vuejs org v2 guide

随机推荐

  • 【SpringMVC】Jrebel 插件实现热部署与文件上传

    目录 一 JRebel 1 1 Jrebel介绍 1 2 Jrebel插件下载 1 3 Jrebel服务下载并启动 1 4 在线生成GUID 1 5 JRebel激活 1 6 相关设置 注意 二 文件上传 下载 2 1 导入pom依赖 2
  • MATLAB 拟合神经网络—— fitnet

    建立神经网络 语法 net fitnet hiddenSizes trainFcn hiddenSize 为隐藏层数 是一个行向量 分别表示从左到右的隐藏层神经元数 trainFcn 为训练函数 如下表所示 名称 函数 trainlm Le
  • go 进阶 go-zero相关: 三. go-zero 微服务基础示例

    目录 一 go zero 微服务基础 安装 ETCD 1 docker 安装运行etcd 2 windows 安装 etcd 二 go zero使用goctl命令创建一个普通的服务 三 go zero使用goctl命令创建一个rpc服务 1
  • python批量下载文件并压缩后上传到owncloud

    目录 1 首先获的一个保存url的文件 2 下载文件到服务器 3 将文件上传到owncloud 3 1 上传单个文件 3 2 上传多个文件 大文件拆分为小文件 推荐 摘要 笔者想下载东西到本地 直接下载速度超慢 一共需要下载1500张图 下
  • 每天进步一点点【图的深度优先遍历(DFS)】

    图是一种数据结构 其中节点可以具有零个或多个相邻元素 两个节点之间的连接称为边 节点也可以称为顶点 图分为三种 无向图 有向图 带权图 图的表示方式有两种 二维数组表示 邻接矩阵 链表表示 邻接表 邻接矩阵 邻接矩阵是表示图形中顶点之间相邻
  • 局域网使用kubeadm安装高可用k8s集群

    主机列表 ip 主机名 节点 cpu 内存 192 168 23 100 k8smaster01 master 2核 2G 192 168 23 101 k8smaster02 node 2核 2G 192 168 23 102 k8sma
  • 第三方支付自建商户池体系

    三方支付自建商户池体系通常指的是第三方支付机构自己搭建的商户池管理系统 商户池是指该支付机构所拥有的所有商户账户的集合 在支付领域 商户池的建立对于支付机构来说非常重要 它可以帮助支付机构更有效地管理商户 风控和支付流程 以下是自建商户池体
  • Animator的基本用法

    这里仅仅介绍Animator的一些基本的用法 说到Animator 最重要的最常用的的就是ObjectAnimator类 因为这个类可以对任意View的任意属性进行操作 首先以ImageView为例 以下所有的操作都针对ImageView
  • Node.js web3.js编译、部署智能合约

    Node js web3 js编译 部署智能合约 供参考脚本 https github com Saturday24 Smart Contracts Script 1 编译脚本 a install web3 solc fs path b 编
  • linux查看所有的进程及端口,linux查看所有进程和端口

    Linux下查看一个进程占用了哪个端口的方法 时候需要在Linux下查看一个进程占用了那个端口 但是只知道进程大致的名称 比如要查看hadoop的namenode在哪个端口上运行 以便在eclipse中连接 首先用ps命令查看进程的id 复
  • 校招算法题实在不会做,有没有关系?

    文章目录 前言 一 校招 二 时间复杂度 1 单层循环 2 双层循环 三 空间复杂度 四 数据结构 五 校招算法题实在不会做 有没有关系 六 英雄算法集训 前言 英雄算法联盟八月集训 已经接近尾声 九月算法集训将于 09月01日 正式开始
  • Mock 模拟测试简介及 Mockito 使用入门

    Mock 是什么 mock 测试就是在测试过程中 对于某些不容易构造或者不容易获取的对象 用一个虚拟的对象来创建以便测试的测试方法 这个虚拟的对象就是mock对象 mock对象就是真实对象在调试期间的代替品 简单的看一张图 我们在测试类 A
  • Java锁机制,synchronized和lock详解。

    Java锁机制详解 1 java各种锁详解 1 1 公平锁 vs 非公平锁 公平锁 是指多个线程按照申请锁的顺序来获取锁 线程直接进入队列中排队 队列中的第一个线程才能获得锁 类似排队打饭 先来后到 非公平锁 是指多个线程获取锁的顺序并不是
  • HDFS的基础详解

    概念 HDFS是Hadoop Distribute File System 的简称 Hadoop 分布式文件系统 是hadoop核心组件之一 作为最底层的分布式存储服务而存在 分布式文件系统解决的问题就是大数据存储问题 设计目标 1 硬件故
  • 自媒体爆款标题怎么写?手把手教你写热门标题

    自媒体内容想提高阅读量 标题是关键 如何创作优质且有吸引的标题呢 自媒体爆款标题怎么写 今天对热门标题进行解析 手把手教你写爆款标题 1 标题贴合热点 用户对热点的关注度超乎想象 有时候对热点关键词的搜索都能让系统崩溃 所以 在标题中添加热
  • Python语言学习实战-内置函数sorted()的使用(附源码和实现效果)

    实现功能 sorted 函数是Python的内置函数之一 用于对可迭代对象进行排序操作 它可以对列表 元组 字符串等可迭代对象进行排序 并返回一个新的已排序的列表 sorted 函数的语法如下 sorted iterable key Non
  • unity用visual studio写代码的时候一直显示importing assets

    项目场景 提示 使用Unity时打开C 弹出opening visual studio 然后一直停在importing assets这个界面 不影响写代码和运行 但是非常不舒服 困扰我许久 特别浪费时间 问题描述 unity3d打开项目中遇
  • JAVA应用程序集成控件JxBrowser v7.2来啦!允许自定义错误页面

    JxBrowser 点击下载 是将基于Chromium的浏览器与Java应用程序集成 以处理和显示HTML5 CSS3 JavaScript Flash等 JxBrowser更新至最新版v7 2 允许针对HTTP和网络错误覆盖标准Chrom
  • ES 搜索7 (多词查询)

    多词查询 如果我们一次只能搜索一个词 那么全文搜索就会不太灵活 幸运的是 match 查询让多词查询变得简单 GET my index my type search query match title BROWN DOG 上面这个查询返回所
  • vue 使用el-option标签解决不回显的问题

    一 问题描述