element-plus + VUE3 项目 build 之后 el-select无法选中

最新推荐文章于 2025-05-09 15:52:03 发布
最新推荐文章于 2025-05-09 15:52:03 发布
阅读量933 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue Element 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cmhdl521/article/details/124874253

这个项目在运行npm run dev，一切正常，但是build之后，所有el-select无法选中。项目里的el-select是被我单独封装了一个组件。

最后才发现是在data里定义的时候，没有定义对象的属性。

之前在vue2.0中，一直偷懒，data定义弹窗加载的对象都是直接定义的一个空对象，后面axios加载数据赋值后直接就能读取绑定上。

最后改成这样，build之后正常了。

也许因为没有定义对象的属性，不属于响应式对象，也许更多的原因，可能是因为封装的组件还不够完美，能觉得就是好事，哎。。。

vue3+element-plus+flask 简易【工作日志本】小软件（过程超详细）
08-08 642
终于有时间继续学习技术了！开发了一个简易的用于记录日常工作内容的小软件，权当学习和练手。功能如下：用户登录、日志内容的查、增、删、改以及导出。windows 10，mysql 8，Hbuilder X（最近vs code总是崩溃）
Springboot3 + MyBatis-Plus + MySql + Vue + ProTable + TS 实现后台管理商品分类（最新教程附源码）
一名全栈小白的博客
09-30 1629
Springboot3 + MyBatis-Plus + MySql + Vue + ProTable + TS 实现后台管理商品分类（最新教程附源码）
Vue3 element-plus el-select 无法选中，又不报错
m0_37616866的博客
04-26 3779
Vue3 中el-select 下拉框 使用的坑
element-plus el-select选择器无法选中显示的内容
wy271013的博客
05-07 1148
函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。今天使用element ui的下拉选择框组件时，发现选中了值却没有显示在框中。出现这个问题好像是因为下拉框数据是循环别的接口得来的，因为数据层次太多，在选中事件加上 this.$forceUpdate()强制刷新即可。
VUE el-select下拉框动态设置禁用，删除后恢复可选择
最新发布
Aotman_的博客
05-09 671
点击新增添加按钮，列表table会新增一条包含下拉菜单的数据，如果其中任何一个下拉框选择了某个值，那么新增的下拉菜单的选项中该值是禁用状态，只能选择其他未被选中过的值。点击删除按钮后，已禁用的选项放开，可再次选择。
Vue3 Element Plus 封装 el-select - 附完整示例
m0_48968874的博客
06-17 3251
Vue3 Element Plus 封装 el-select
element模态框dialog中的select组件中选中无反应
PGguoqi的博客
05-16 1万+
准确说，是在dialog的el-from组件中的el-select组件，打开模态框时，对select绑定的数据重新赋值value1，select视图层状态会变成value1，但之后变更option选项，select视图层*不再更新。 一般是在新建或编辑数据，弹出dialog模态框，在弹窗的表单里对该条数据进行编辑修改。 <el-dialog :visible.sync="dialogEdit...
vue3.x + elementPlus 封装组件之select下拉选择篇
m0_62015496的博客
06-23 5392
vue3.x + elementPlus 封装组件之select下拉选择篇
vue3+typeScript+vite3+vscode+eslint+prettiter+element-plus+vue-router+pinia+cryptoJs+tailwindcss
weixin_38570667的博客
03-29 403
当然y加回车啦，它问项目名称，输入你需要新建的项目名称加回车确认，它问选择一个框架，这里当然选vue，它问选择一个变体，选择TypeScript加回车，恭喜你成功，你现在可以cd到你刚刚新建目录，然后安装依赖。nodeJs官网：https://nodejs.org/en，底部两个大型绿色按钮是node的版本，推荐使用左侧的（大多数人下载的），下载完成双击运行，一路下一步安装。在main.ts同级新建router目录，目录下再新建index.ts。打开cmd命令面板，cd到存放项目目录，输入。
Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目
qq_24484317的博客
02-14 3035
Vue3+Vite+Pinia+ElementPlus+Router+Axios创建项目
vite+ts+vue3项目初始化 -- eslint+prettier代码格式化
weixin_43993776的博客
08-29 1881
【代码】vite+ts+vue3项目初始化。
ElementPlus：select 获取选中的选项对象
一些平时在开发过程中遇到的常见问题，分享给大家
09-26 558
ElementPlus：select 获取选中的选项对象
vue3 初体验之使用element-plus的el-select报错Unhandled error during execution of scheduler flush
热门推荐
YouthMe的博客
12-22 1万+
笔者最近在用vue3 写自己的博客，后端使用element-plus 在给el-select绑定数据时惊奇的发现报错了 但根据我在vue2.x上的经验感觉这样写并没有什么毛病， 根据多次尝试，当我给v-for的数据给定了初始值后发现报错没有了，这里可能是vue3还在beta中所以存在的bug， 期待后续vue官方的解决 ...
vue3+elementui Plus 表单select下拉框选中后无效？
weixin_55341181的博客
07-11 3829
使用了纯vue3写法写了个下拉框，出现了个莫名其妙的bug，就是下拉选中后无效。示例： 代码： 下拉框选中后就是无法回显，打印出来的form对象也没有选中的数据。打印： 解决方案：就是form的model变量名和ref的名字重复了，把两个其中一个改下就好了，保证不重名。 总结：form的model和ref重名会出现很多奇奇怪怪的bug 大概是冲突吧 但是这个问题在vue2是没有遇到过的。......
vue element的select下拉框赋值之后无法选择
weixin_56408993的博客
04-19 4004
问题描述： 用element的select下拉框之后，在回显后有初始值的情况下，不能修改，也不能选择 如图，明明点击了一般内勤主管，但没有任何反应 <el-select v-model="editContent.position" multiple placeholder="请选择"> <el-option v-for="item in positionOptions" :key="item.code" ...
vue+element ui中select组件选择失效问题原因与解决方法
bossjing的博客
07-10 5043
.当表单form赋完值后，如果后续又对form中某一属性值进行操作如图： 此处对form中的attId进行操作 后续如果form表单组件中使用select组件同时绑定attId这个值 如图： 此时select选择框点击选项表单中是不做显示的也就是说选择完之后没有反应，此时应该在select组件上加上强制渲染 如图： ...
element Select 选择器 回显options未选中
weixin_51052286的博客
07-25 625
select回显option未被选中
vue3表单项的输入和选择有时失效
m0_37755267的博客
08-11 447
vue3表单项的输入和选择有时失效
Vue3中Element-plus不生效问题解决
kk爱闹
02-15 4723
解决Vue3中element-plus不生效问题
Vue3 + Element-Plus + Vue-Router + Axios分别是什么
03-19
### Vue3 功能介绍及用途 Vue3 是新一代的渐进式 JavaScript 框架，其核心设计目标是提高性能、增强可维护性和扩展性。通过引入 Composition API 和改进的响应式系统，Vue3 提供了一种更灵活的方式来组织代码逻辑[^4]。 ```javascript // 使用 Composition API 的示例 import { ref, reactive } from &#39;vue&#39;; export default { setup() { const count = ref(0); const state = reactive({ name: &#39;Vue&#39; }); function increment() { count.value++; } return { count, state, increment }; } }; ``` --- ### Element Plus 功能介绍及用途 Element Plus 是一款专为 Vue3 设计的现代化 UI 组件库，提供了丰富的组件集合，能够快速构建美观且功能强大的用户界面。它继承了 Element UI 的设计理念，并针对 Vue3 进行了全面优化，支持 TypeScript 和 Composition API。 ```html <!-- 使用 Element Plus 的按钮组件 --> <el-button type="primary">Primary Button</el-button> <script> import { ElButton } from &#39;element-plus&#39;; export default { components: { ElButton }, }; </script> ``` --- ### Vue Router 功能介绍及用途 Vue Router 是 Vue.js 官方推出的路由管理工具，主要用于实现单页应用程序 (SPA) 中的导航和视图切换。通过定义路由规则并结合 `<RouterView>` 渲染对应的组件，开发者可以轻松创建复杂的多页面布局[^3]。 ```javascript // 路由配置示例 const routes = [ { path: &#39;/&#39;, component: Home }, { path: &#39;/about&#39;, component: About }, ]; const router = createRouter({ history: createWebHistory(), routes, }); createApp(App).use(router).mount(&#39;#app&#39;); ``` --- ### Axios 功能介绍及用途 Axios 是一个基于 Promise 的 HTTP 请求客户端，适用于浏览器端和 Node.js 环境。它可以用来发起 GET/POST 等类型的网络请求，简化前后端数据交互的过程。由于其简单易用的 API 接口以及良好的跨平台兼容性，Axios 成为了许多前端项目的首选方案之一。 ```javascript // 发起 GET 请求 axios.get(&#39;/api/data&#39;) .then(response => console.log(response.data)) .catch(error => console.error(error)); // 配置拦截器 axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${token}`; return config; }); ``` --- #### 总结 - **Vue3**: 新一代框架，提升开发体验与运行效率。 - **Element Plus**: 基于 Vue3 的高质量 UI 库，助力快速构建界面。 - **Vue Router**: 实现 SPA 导航的核心工具，便于动态加载不同视图。 - **Axios**: 异步通信利器，负责处理 RESTful 数据交换需求。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值