vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
文章目录
- vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
参考文章
重构vue2项目时发现的问题,原始项目使用的是Element-ui。
其实vue3可以使用适配的Element-plus
问题描述
- el-form表单无法输入
- 控制台报错
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.使用响应式变量时应先声明
解决办法
由于 ref 命名和 model 的值一样导致出现了这样的问题。
<el-form ref="service" :model="service" label-width="80px"><el-form-item label="名称"><el-input v-model="service.name"></el-input></el-form-item>......
</el-form>setup() {const state = reactive({service: {name: '**'}})return {...toRefs(state)}
}
原因就是 el-form 声明了ref=“service”,导致 state 中声明的 service 被覆盖,2者冲突了。
相关文章:
vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
文章目录 vue3使用响应式数据 v-model导致响应式失效el-form表单无法输入的问题 vue3使用响应式数据 v-model导致响应式失效el-form表单无法输入的问题 参考文章 重构vue2项目时发现的问题,原始项目使用的是Element-ui。 其实vue3可以使用适配的Element-plus 问…...
线段树详解 原理解释 + 构建步骤 + 代码(带模板)
目录 介绍: 定义: 以具体一个题目为例: 树的表示方法: 实现步骤: 构建结点属性: pushup函数: build函数: pushdown函数: modify函数: query…...
Java中Timer的使用
Timer 简述 在Java中,Timer(计时器)是一个用于安排定时任务的类。它可以实现在指定的时间间隔或指定的时间点执行某项任务或操作。 简单的来说Timer就是在Java中用来实现定时任务的工具。 Timer的API Timer中有两API可以使用分别是schedule…...
关于EJB,这两文把热闹和门道都说清楚了
关于技术的很多概念,如果你是小白,不建议看官网。原因就在于官网描述太抽象,就像八股文,看完感觉好像说了很多,但回过头又感觉似乎啥都没说。太虚、不接地气,是最大毛病。其实这些官网的打太极式的表述&…...
MixFormerV2: Efficient Fully Transformer Tracking
摘要 基于变压器的跟踪器在标准基准测试上取得了很强的精度。然而,它们的效率仍然是在GPU和CPU平台上实际部署的一个障碍。在本文中,为了克服这一问题,我们提出了一个完全变压器跟踪框架,称为MixFormerV2,没有任何密集…...
K8S中网络如何通信
Kubernetes 提出了一个自己的网络模型“IP-per-pod”,能够很好地适应集群系统的网络需求,它有下面的这 4 点基本假设: 集群里的每个 Pod 都会有唯一的一个 IP 地址。Pod 里的所有容器共享这个 IP 地址。集群里的所有 Pod 都属于同一个网段。…...
LangChain Agents深入剖析及源码解密上(三)
AutoGPT案例V1版本 AutoGPT是一个实验性的开源应用程序,展示了GPT-4语言模型的功能,AutoGPT程序由GPT-4驱动,将大语言模型的思考链接在一起,以自主实现设定的任何目标。作为GPT-4完全自主运行的首批例子之一,AutoGPT突破了人工智能的可能性。LangChain框架复现了https://g…...
分布式限流方案及实现
优质博文:IT-BLOG-CN 一、限流的作用和意义 限流是对高并发访问进行限制,限速的过程。通过限流来限制资源,可以提高系统的稳定性和可靠性,控制系统的负载,削峰填谷,保证服务质量。 服务限流后的常见处理…...
vuejs源码阅读之优化器
前面讲过vuejs中解析器是把html模版解析成AST,而优化器的作用是在AST中找到静态子树并打上标记。 静态子树是指的那些在AST中永远不会发生变化的节点。 例如,一个纯文本节点就是静态子树,而带变量的文本节点就不是静态子树,因为…...
【C++】-动态内存管理
作者:小树苗渴望变成参天大树 作者宣言:认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! 文章目录 前言一、C内存管理方式1.1 new/delete操作内置类型 总结 前言 今天再讲一个…...
微服务SpringCloud教程——微服务是什么
微服务(MicroServices)最初是由 Martin Fowler 于 2014 年发表的论文《MicroServices》中提出的名词,它一经提出就成为了技术圈的热门话题。 微服务,我们可以从字面上去理解,即“微小的服务”,下面我们从“…...
RNN架构解析——LSTM模型
目录 LSTMLSTM内部结构图 Bi-LSTM实现 优点和缺点 LSTM LSTM内部结构图 Bi-LSTM 实现 优点和缺点...
苹果电脑系统优化工具:Ventura Cache Cleaner for mac
Ventura Cache Cleaner for Mac是一款专门为苹果电脑开发的系统优化工具,旨在帮助用户清理和优化Mac电脑,提高系统性能和速度。该软件由美国公司Northern Softworks开发,已经推出了多个版本,适用于不同版本的Mac操作系统。 Ventu…...
为了爱人穿越沙漠-心理测试
我觉得很准的一个心理测试。我的答案反射出我的态度,它们是100%的贴切。有兴趣的朋友也不妨一试。 你有一个深爱着的心上人,然而你们却被一片无垠的沙漠相隔两地,你禁不住思念的折磨,决定穿越沙漠去寻找你心中的那个爱人…… 1、…...
SpringBoot月度员工绩效考核管理系统【附任务书|ppt|万字文档(LW)和搭建文档】
主要功能 员工登录: ①首页、个人中心:修改密码、个人信息管理等 ②公告信息管理、绩效指标管理、绩效考核管理 管理员登录: ①首页、个人中心:修改密码、个人信息管理等 ②公告信息管理、部门管理、岗位管理、员工管理、绩效指标…...
【新星计划】STM32F103C8T6 - C语言 - 蓝牙JDY-31-SPP串口通信实验
文章目录 蓝牙技术的发展历史SPP蓝牙串口BLE协议(超低功耗应用蓝牙协议) 常见通用蓝牙模块JDY-31-SPPHC05/06 Keil 工程开发模版main.c 源文件:接线方式:烧录工具:FlyMcu串口调试工具:XCOM蓝牙调试助手APP …...
算法39:Excel 表列序号
一、需求 给你一个字符串 columnTitle ,表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如: A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: columnTitle “A” 输出: 1 示例 2&…...
Android:ImageView xml方式配置selector 图片切换
1、在res/drawable目录下创建一个新的XML文件,比如selector_image.xml <?xml version"1.0" encoding"utf-8"?> <selector xmlns:android"http://schemas.android.com/apk/res/android"> <!-- 背景选择器 state_pre…...
Spring Boot 缓存 Cache 入门
Spring Boot 缓存 Cache 入门 1.概述 在系统访问量越来越大之后,往往最先出现瓶颈的往往是数据库。而为了减少数据库的压力,我们可以选择让产品砍掉消耗数据库性能的需求。 当然也可以引入缓存,在引入缓存之后,我们的读操作的代码ÿ…...
如何关闭谷歌浏览器自动更新
适用范围: 写自动化脚本时,需要安装浏览器驱动,安装浏览器驱动时需要下载对应的浏览器驱动版本,如果浏览器版本一直在自动更新的话,自动化脚本会报错浏览器版本和浏览器驱动不匹配,所以建议关闭谷歌浏览器自动更新&am…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
