记录element-plus + vue3.2 + tsx 开发时的问题

2023-11-17

开发时,select组件无法通过 model-value / v-model / value 设置值。
查看了一下源码

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1e92e6feabc4c59959ac4f7085b9c66~tplv-k3u1fbpfcp-watermark.image?)

定义的变量是 **modelValue**,所以修改为对应变量即可

代码
```
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
]


const select_value = ref('')

```
```

<el-select
    modelValue={select_value}
    value-key="label"
    onChange={($event) => {
        select_value.value = $event
    }}>
    {!!options &&
        options.map((item) => {
            return <el-option key={item.value} label={item.label} value={item} />
        })}
</el-select>
```

随笔,后续随时补充更新

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

记录element-plus + vue3.2 + tsx 开发时的问题 的相关文章

  • 同时使用 Vuetify 和 Vue-i18n 翻译

    我正在使用 Vuetify 想要添加我自己的按钮翻译 并使用 Vuetify 提供的翻译 我目前的 Vuetify 配置文件设置如下 import Vue from vue import Vuetify from vuetify impor
  • 如何在Nuxt Js中使用Google Map API?

    下面是我在 Nuxt Js 中获取 API 的代码 我已经编写了用于调用 API 的代码 但没有得到结果 我也没有得到任何与此相关的资源 async created const config headers Accept applicati
  • 使用 v-bind Vue.js 的多个变量

    我试图在以下代码中传递多个变量 div div 但我收到以下错误 Vue warn 无法生成渲染函数 SyntaxError 意外的标记 在 我尝试更换 with a 但我得到 Vue warn 无法生成渲染函数 SyntaxError I
  • 在 Vue.js 中,如何防止子路由的导航?

    好的一点是beforeRouteLeave是你可以防止在某些情况下导航离开 我有一个使用子路由来渲染页面的一部分的设置 我希望在子路线上设置一个导航守卫 以防止在未保存数据的情况下切换到另一条路线 path customers view c
  • Vue.js 路由器 - 条件组件渲染

    routes path name home get component if Vue loggedIn return Home else return Login 我添加了一个吸气剂 似乎工作正常 但我在 if 语句中使用的任何变量或函数都
  • 可以在 Vue 模板中渲染 VNode 吗?

    我遇到的情况是 我有一个渲染函数将一些数据传递到作用域槽 作为此数据的一部分 我想包含一些由渲染函数构造的 VNode 这些 VNode 可以选择由作用域插槽使用 无论如何 在模板中编写作用域槽以输出收到的原始 VNode 时是否存在 Vu
  • vue-router 仅更改命名视图之一,而不影响其他视图

    我正在使用 vue router 进行测试并遇到这个问题 如果我有两个命名视图但我只想更改其中一个而不更改默认视图怎么办 目前我是这样做的 const router new VueRouter routes path components
  • Vue Chart.js - 数据变化时图表不更新

    我正在使用 Vue js 和 Chart js 绘制一些图表 每次我调用该函数时generateChart 图表不会自动更新 当我在 Vue Devtools 中检查数据时 它们是正确的 但图表没有反映数据 但是 当我调整窗口大小时 图表确
  • 组件内调用 Mixin 的方法(Vuejs)

    我无法从组件调用 mixin 方法 出现此错误this hello is not a function 我可以打电话hello 来自 Vue 实例 但我无法在组件内调用它 有什么事吗 div div
  • 使用 vee-validate 在 vue js 中进行验证有错误

    我想在 vuejs 中进行验证 因为我正在使用 vee validate 我的vue js版本是2 6 10 并安装 run npm install vee validate 我在 main ts 中声明 import VeeValidat
  • 如何在外部 .js 文件中分离 .vue 组件的方法?

    我的组件留下了许多行代码 因此我决定将这些方法放在一个名为functions js 的单独文件中 我无法调用这些方法 我试过这个 函数 js function sendList function getLists function dele
  • 观察数组中当前值的变化

    每当它改变半径和中心时 我想监视每个项目 每当它改变时 我想 console log 项目索引和值 let map ref null map value circles是一个数组 当我使用此监视功能时 它仅在加载时显示一次值 我希望每次它在
  • Vuetify 默认轮播 CSS 选择器,用于减少过渡持续时间

    I need a transition that does not produce the dreaded image blinking for a v carousel item Ideally it s a smooth and qui
  • Vue / Typescript,获取模块“*.vue”没有导出成员

    我想导出几个接口Component from vue file 基本 vue
  • 如何在 vue.js 中使用 SVG.js 插件?

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo
  • vue:转义并渲染 HTML 字符串?

    我正在尝试在模板中渲染一些 HTML 字符串 但我希望它们是字符串 我不想渲染 富文本 我开始于
  • Vuejs 在模板中添加多行?

    我想知道在构建 Vuejs 模板时如何最好地安排新行 我的代码不起作用 因为它破坏了 JavaScript 容器 Vue js 希望我将整个 html 放在一行中 当我计划添加页脚内容时 这有点不切实际 Vue component foot
  • Vuex store.watch 只接受 Vue routerguard 中的函数

    我正在尝试观察并等待 Vue 路由器防护从 Vuex 获取最终值 但它会抛出异常 vuex store watch 只接受一个函数 这是代码 const isAdmin get store getters user isAdmin unde
  • 如何将类应用于 Buefy 表中的特定单元格?

    我想知道是否有一种方法可以动态应用针对 Buefy 表中特定单元格的类 作为示例 以下是我正在处理的代码 模板
  • Vuex存储数据总是驻留在内存中?

    首先 我希望您能理解我蹩脚的英语 我想知道Vuex的存储数据是否总是驻留在内存中 让我用一个例子来解释一下 当进入页面A时 我们从服务器收到一个列表 并实现将其存储在商店中 这是否意味着当我进入页面A并移动到页面B时 A的列表将保留在内存中

随机推荐

  • 无线网破解 跑字典 EWSA使用教程

    无线网破解 跑字典 EWSA使用教程 导入握手包 配置攻击字典 步骤阅读 配置EWSA 1 选项 字典DIY 字典设置 密码变化选项 把勾选都去掉 2 选项 字典DIY 字典设置 导入我们自己的字典 生日字典和8位纯数字字典 点击开始测试
  • Arduino编译错误解决办法:fork/exec:…\arm-none-eabi-g++.exe: The filename or extension is too long

    编译错误解决办法 fork exec arm none eabi g exe The filename or extension is too long 解决方案来自Edge Impulse 当使用Arduino编译STM或Arduino文
  • element-ui中,规定from表单提交的时间格式

    element ui中 规定from表单提交的时间格式 比如显示年月日时分秒 但是后台只需要年月日 这个时候就利用value format和format value format绑定值的格式也就是最后后端接口需要我们传的数据格式 forma
  • 【华为OD统一考试A卷

    华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一修改为OD统一考试 A卷 和OD统一考试 B卷 你收到的链接上面会标注A卷还是B卷 请注意 根据反馈 目前大部分收到的都是
  • Spring Boot 整合 MyBatis 实现乐观锁和悲观锁

    完整代码 https github com imcloudfloating Lock Demo GitHub Page http blog cloudli top posts Spring Boot MyBatis 实现乐观锁和悲观锁 原文
  • Oracle 数据库审计

    保证数据库的安全有两种方式 一种是通过权限的存取控制机制 即通过预先控制来防止安全事件的发生 另一种是数据库审计 即对数据库活动做跟踪记录 当发生安全事件时 通过对数据库活动记录进行审计来发现并修复安全问题 Oracle使用大量不同的审计方
  • 用Python写个弹球的游戏

    原创 xinxin 菜鸟学Python 我们前面讲了几篇关于类的知识点 为了让大家更好的掌握类的概念 并灵活的运用这些知识 我写了一个有趣又好玩的弹球的游戏 一来可以把类的知识融会一下 二来加深对Python的兴趣 你会发现哎呀Python
  • eclipse Maven 插件添加第三方远程仓库

    方法一 在maven 配置文件setting xml 添加镜像点 mirror eclipse的 preferences gt maven gt User Settings 你就可以看到你的setting xml文件的地址 打开settin
  • SqueezeNet运用到Faster RCNN进行目标检测+OHEM

    目录 目录 一SqueezeNet介绍 MOTIVATION FIRE MODULE ARCHITECTURE EVALUATION 二SqueezeNet与Faster RCNN结合 三SqueezeNetFaster RCNNOHEM
  • unity出pc的包,然后想调试C#的dll咋办

    加入我们的逻辑代码是以dll的方式 放到unity项目中如下 namespace CSharpDll public class Utils public int Add int a int b int c a b return c publ
  • 2013全球移动游戏产业白皮书

    2013全球移动游戏产业白皮书 在全球移动游戏产业迅猛发展的背景下 中国移动游戏产业也进入了 高铁 时代 2013年 中国国内Android和iOS活跃设备量已达到3 7亿部 并涌现出20余款月流水超过千万元的 明星 移动游戏产品 对其内容
  • mysql数据库各种应用_MySQL数据库常见管理应用(1)

    MySQL数据库常见管理应用 1 创建数据库 创建一个数据库solin mysql gt create database solin 建立一个名为solin gbk的GBK字符集 mysql gt create database solin
  • Java通过反射获取注解以及注解中的信息

    首先自定义两个注解 1 用于描述表名 只能用在类 接口 枚举上 Target ElementType TYPE Retention RetentionPolicy RUNTIME public interface TableName Str
  • 《现代控制系统》第五章——反馈控制系统性能分析 5.3 二阶系统的性能

    现在我们看一个单环二阶系统的单位阶跃响应 一个闭环反馈控制系统如下图所示 已知该闭环系统的转换方程为 把受控系统的转换方程代入进去得到 如果给一个阶跃输入 那么 查拉普拉斯逆变换表我们得到时域输出为 其中 同时也是特征方程在s域的根与原点的
  • 实际项目二次封装axios------request.js和使用

    前言 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 本质上也是对原生XHR的封装 只不过它是Promise的实现版本 符合最新的ES规范 在项目的实际开发中用到也比较多 这里我介绍一下实际开发中的基
  • 什么是高内聚、低耦合?

    起因 模块独立性指每个模块只完成系统要求的独立子功能 并且与其他模块的联系最少且接口简单 两个定性的度量标准 耦合性和内聚性 耦合性也称块间联系 指软件系统结构中各模块间相互联系紧密程度的一种度量 模块之间联系越紧密 其耦合性就越强 模块的
  • align-items属性

    弹性子元素在 侧轴 交叉轴上的对齐方式 align items stretch 默认值 如果弹性子元素没有高度或高度为auto 将占满整个容器的高度 align items flex start 子元素在侧轴顶端对齐 align items
  • CSS餐厅小游戏练习1~32关(附答案和链接)

    前言 CSS3众多基础常见的选择器都可以小游戏中学习 每天刷一遍 辅助记忆 做好熟练运用CSS3的第一步 小游戏链接 CSS3餐厅练习 玩法 利用各种选择器和选择器之间的关系选中抖动的物体即可通关 文章目录 第一关 Type Selecto
  • postgresql从入门到菜鸟(三)基本命令和窗口函数

    上一篇我们已经在rhel上创建了数据库 并且建立的一张成绩表 之后通过通过客户端连接上服务器端 这一篇将会写一些关于数据库的操作 首先是一些基本的操作的操作如选择数据库 查看表等等 连接至服务器端后可以通过以下命令查看数据库的基本信息 l
  • 记录element-plus + vue3.2 + tsx 开发时的问题

    开发时 select组件无法通过 model value v model value 设置值 查看了一下源码 image png https p1 juejin byteimg com tos cn i k3u1fbpfcp e1e92e6