当前位置: 首页 > news >正文

vue3大事件项目

这周写完了vue3的大事件项目,从中学到了很多东西,并且解決了一部分bug,現在就和大家分享一下我遇到的问题并且是如何解決的

1. QuillEditor 的 v-model 用法错误 

先讲一下quilleditor富文本的基本使用方法:

1.安裝quill依賴:

pnpm add @veuup/vue-quill@lastest

2.局部注冊:

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

3.使用:

<template><QuillEditor theme="snow" />
</template>

问题: 

版本问题,如果在quill版本2.0之后使用这个方法,那么我们的content会没有绑定上去,也不会有任何值的改变
 <QuillEditor v-model="formModel.content" ... />

那么如何解决这个问题呢?那就需要用到我们的另一种写法

 <QuillEditor v-model:content="formModel.content" ... />
2.x 版本推荐用

只有这样,富文本内容和  v-model:content="formModel.content" 才能实现真正的双向绑定,内容才能实时同步

2.接口请求异步问题:

当一次请求两个接口的时候,比如现在我要删除一条数据,然后删除之后我想再拉取一下我的数据列表进行更新,但是我拉取数据的接口比我删除的接口执行的快,那么我删除成功就不会有页面更新了,所以这个时候我们需要promise异步请求,还有添加的请求...

情况就和下面的差不多,拿add的网络请求接口举例,

这里的请求add耗时明显比list快,就是请求的快,所以这里我们需要一个promise,先让我的add执行完,再调用我的list

这个就是我更改之后删除操作(因为请求接口更加明显简单)的详细请求,可以解决上面的问题,使用promise快速解决:

const handleDelete = async (row) => {try {// 确认删除对话框await ElMessageBox.confirm('确定要删除该分类吗?', '温馨提示', {type: 'warning',confirmButtonText: '确定',cancelButtonText: '取消',center: true})// 记录删除操作开始时间const startTime = Date.now()// 执行删除操作await artDeleteChannel(row.id)// 显示成功消息ElMessage.success('删除成功')// 计算操作耗时const operationTime = Date.now() - startTime// 如果删除操作完成太快,添加一个小延迟确保服务器数据已更新if (operationTime < 500) {// 等待一段时间确保服务器数据已同步await new Promise(resolve => setTimeout(resolve, 500 - operationTime))}// 获取最新列表数据await getChannelList()} catch (error) {// 处理用户取消删除或删除失败的情况if (error !== 'cancel' && error !== 'close') {ElMessage.error('删除失败:' + (error.message || '未知错误'))}}
}

这些就是我遇到的一些问题,希望可以帮助到大家

相关文章:

vue3大事件项目

这周写完了vue3的大事件项目&#xff0c;从中学到了很多东西&#xff0c;并且解決了一部分bug&#xff0c;現在就和大家分享一下我遇到的问题并且是如何解決的 1. QuillEditor 的 v-model 用法错误 先讲一下quilleditor富文本的基本使用方法&#xff1a; 1.安裝quill依賴&am…...

MapReduce-WordCount实现按照value降序排序、字符小写、识别不同标点

要求&#xff1a; 输入文件的按照空格、逗号、点号、双引号等分词 输入文件的大写字母全部换成小写 文件输出要求按照value值降序排序 Hadoop给的wordcount示例代码以及代码理解 基于map reduce的word count个人理解&#xff1a;输入的文件经过map reduce框架处理后&#…...

c++线段树之单点修改区间最大子段和-----P4513 小白逛公园

题目大意 单点修改查询区间最大字段和 解题思路 如果线段树节点存储的是‘区间最大子段和’&#xff0c;如何合并&#xff1f; 简单的加法或求极值都不行&#xff0c;仔细分析可得&#xff0c;父节点最大字段和可能为&#xff1a; 左子树最大子段和右子树最大子段和左子树最…...

[Java实战]Spring Boot整合Elasticsearch(二十六)

[Java实战]Spring Boot整合Elasticsearch&#xff08;二十六&#xff09; 摘要&#xff1a;本文通过完整的实战演示&#xff0c;详细讲解如何在Spring Boot项目中整合Elasticsearch&#xff0c;实现数据的存储、检索和复杂查询功能。包含版本适配方案、Spring Data Elasticsea…...

【深度学习新浪潮】大模型在哪些垂域已经有比较好的落地?

AI大模型在多个垂直领域已实现显著落地,以下结合可验证案例与行业数据展开说明: 一、医疗健康:精准诊断与个性化治疗 呼吸系统疾病诊断 国家呼吸医学中心研发的LungDiag模型,基于公开临床数据集训练,在预印本研究中对肺炎、肺癌等10种疾病的辅助诊断准确率达92%。医联Med…...

软件测试全攻略:从概念到实践

目录 测试指南针--概念篇 1. 什么是软件测试&#xff1f; 2. 软件测试和软件开发的关系是什么&#xff1f; 3. 测试需要哪些能力&#xff1f; 4. 测试流程是什么样的&#xff1f; 5. 什么是单元测试和集成测试&#xff1f; 6. 软件的生命周期是什么样的&#xff1f; 需求…...

linux hungtask detect机制分析

1&#xff0c;机制概述‌ hungtask detect 是 Linux 内核用于检测长时间阻塞&#xff08;"hung"&#xff09;任务的机制&#xff0c;主要针对因死锁、死循环或资源竞争导致无法调度的任务 ‌触发条件‌&#xff1a;任务在 TASK_UNINTERRUPTIBLE 状态持续超过预设阈值…...

影刀处理 Excel:智能工具带来的高效变革

1. 高效的数据处理能力 1.1 快速读取与写入数据 影刀在处理 Excel 数据时展现出显著的读取与写入速度优势。传统方法处理大型 Excel 文件时&#xff0c;读取速度可能仅为每秒 100 行左右&#xff0c;而影刀通过优化底层代码和采用高效的文件解析算法&#xff0c;读取速度可达…...

2021ICPC四川省赛个人补题ABDHKLM

Dashboard - The 2021 Sichuan Provincial Collegiate Programming Contest - Codeforces 过题难度&#xff1a; A K D M H B L 铜奖 5 594 银奖 6 368 金奖 8 755 codeforces.com/gym/103117/problem/A 模拟出牌的过程&#xff0c;打表即可 // Code Start Here int t…...

HarmonyOS 影视应用APP开发--配套的后台服务go-imovie项目介绍及使用

网上有小伙伴对影视应用感兴趣&#xff0c;也想搞个自己的免费观影APP玩玩儿。前期博主开源的有uniapp版本和harmonyOS原生版本影视客户端&#xff0c;但是对博主开源的这个影视后台接口服务不太了解&#xff0c;不知道怎么用起来。这里总结介绍下该go-imove后台接口服务项目介…...

JAVA SE 多线程(上)

文章目录 &#x1f4d5;1. Thread类及常见方法✏️1.1 创建线程✏️1.2 Thread 的常见构造方法✏️1.3 Thread 的几个常见属性✏️1.4 启动一个线程---start()✏️1.5 中断一个线程---interrupt()✏️1.6 等待一个线程---join()✏️1.7 获取当前线程引用✏️1.8 休眠当前线程 &…...

基于Bootstrap 的网页html css 登录页制作成品

目录 前言 一、网页制作概述 二、登录页面 2.1 HTML内容 2.2 CSS样式 三、技术说明书 四、页面效果图 前言 ‌Bootstrap‌是一个用于快速开发Web应用程序和网站的前端框架&#xff0c;由Twitter的设计师Mark Otto和Jacob Thornton合作开发。 它基于HTML、CSS和JavaScri…...

AUTOSAR图解==>AUTOSAR_SRS_Transformer

AUTOSAR Transformer 详解 基于AUTOSAR标准的Transformer组件技术解析 目录 1. AUTOSAR Transformer 概述 1.1 Transformer的作用1.2 Transformer在AUTOSAR中的位置2. Transformer架构设计 2.1 整体架构2.2 类结构设计2.3 交互流程3. Transformer类型与实现 3.1 SOME/IP Transf…...

iOS APP启动页及广告页的实现

iOS APP启动页及广告页的实现涉及UI布局、数据加载、倒计时控制、广告跳转等多个关键环节。以下是我的一些使用心得&#xff1a; 1. UI实现方案 双Window方案 原理&#xff1a;同时创建两个Window&#xff0c;主Window位于底层&#xff0c;广告Window覆盖在其上。通过切换mak…...

图绘Linux:基础指令脉络阁

目录 Linux命令行介绍 目录操作 ls 目录所含文件信息 ls 常用选项 pwd 在那个目录下 cd 进入目录 mkdir 创建目录 文件操作 touch 创建普通文件 echo向文件写入 cat 输出文件内容 cp 拷贝文件/目录 mv剪切重命名 rm 删除文件/目录 查找 * 匹配符 man 查找指令 …...

数字格式化库 accounting.js的使用说明

accounting.js 是一个用于格式化数字、货币和金额的轻量级库&#xff0c;特别适合财务和会计应用。以下是其详细使用说明&#xff1a; 安装与引入 通过 npm 安装&#xff1a; bash 复制 下载 npm install accounting 引入&#xff1a; javascript 复制 下载 const accounting …...

ngx_http_proxy_protocol_vendor_module 模块

一、前置要求 启用 PROXY 协议 在 listen 指令中添加 proxy_protocol 参数&#xff0c;例如&#xff1a; server {listen 80 proxy_protocol;listen 443 ssl proxy_protocol;… }商业订阅 本模块仅在 Nginx 商业版中提供。 二、示例配置 http {# 将 GCP 的 PSC 连接 ID 添…...

C++11-(2)

文章目录 &#xff08;一&#xff09;C11新增功能1.1 引用折叠1.1.1 在模板中使用引用折叠的场景1.1.2 引用折叠是如何实现的 1.2 完美转发1.3 lambda表达式语法1.3.1 定义1.3.2 lambda的使用场景1.3.3 捕捉列表1.3.4 mutable语法1.3.5 lambda的原理 &#xff08;一&#xff09…...

LeetCode算 法 实 战 - - - 双 指 针 与 移 除 元 素、快 慢 指 针 与 删 除 有 序 数 组 中 的 重 复 项

LeetCode算 法 实 战 - - - 双 指 针 与 移 除 元 素、快 慢 指 针 与 删 除 有 序 数 组 中 的 重 复 项 第 一 题 - - - 移 除 元 素方 法 一 - - - 双 重 循 环方 法 二 - - - 双 指 针方 法 三 - - - 相 向 双 指 针&#xff08;面 对 面 移 动&#xff09; 第 二 题 - - -…...

QT6 源(106):阅读与注释重要的基类控件 QWidget,这是其精简版,完整注释版为篇 37

&#xff08;1&#xff09;原篇幅 37 为最开始整理&#xff0c;整理的不是太完善。重点不突出。故重新整理&#xff0c;但删除了大量的注释&#xff0c;重在突出本 QWidget类的内部逻辑&#xff0c;更易观察其包含了哪些内容。至于不理解的成员函数与属性&#xff0c;内容已不太…...

【Bluedroid】蓝牙HID DEVICE错误报告处理全流程源码解析

本文基于Android蓝牙协议栈代码&#xff0c;深入解析HID设备在接收非法指令&#xff08;如无效的SET_REPORT&#xff09;时的错误处理全流程&#xff0c;涵盖错误映射、协议封装、传输控制三大核心模块。重点剖析以下机制&#xff1a; HID协议规范错误码的动态转换策略 控制通…...

Day29 类的装饰器

类也有修饰器&#xff0c;他的逻辑类似&#xff1a;接收一个类&#xff0c;返回一个修改后的类。例如 添加新的方法或属性&#xff08;如示例中的 log 方法&#xff09;。修改原有方法&#xff08;如替换 init 方法&#xff0c;添加日志&#xff09;。甚至可以返回一个全新的类…...

学习黑客Active Directory 入门指南(二)

Active Directory 入门指南&#xff08;二&#xff09;&#xff1a;深入逻辑结构与物理组件 &#x1f333;&#x1f3e2; 大家好&#xff01;欢迎回到 “Active Directory 入门指南” 系列的第二篇。在上一篇中&#xff0c;我们初步认识了Active Directory&#xff0c;了解了其…...

为什么el-select组件在下拉选择后无法赋值

为什么el-select组件在下拉选择后无法赋值 https://blog.csdn.net/ZHENGCHUNJUN/article/details/127325558 这个链接解决了大模型无法解决的问题 大模型能够写基础且高级一些的代码&#xff0c;但是遇到再深入一些的问题&#xff0c;还是得问百度。对于我这种小白来说问题原因…...

FreeRTOS的学习记录(临界区保护,调度器挂起与恢复)

临界区 在 FreeRTOS 中&#xff0c;临界区&#xff08;Critical Section&#xff09; 是指程序中一段必须以原子方式执行的代码区域&#xff0c;在此区域内不允许发生任务切换或中断干扰&#xff0c;以保护共享资源或执行关键操作。FreeRTOS 提供了多种机制来实现临界区&#…...

给个人程序加上MCP翅膀

背景 最近MCP这个词真是到处都是&#xff0c;看起来特别高大上。我平时没事的时候也一直在关注这方面的技术&#xff0c;知道它是怎么一回事&#xff0c;也懂该怎么去实现。但可惜一直抽不出时间来自己动手搞一个MCP服务。网上关于MCP的教程一搜一大把&#xff0c;但基本上都是…...

2023年河南CCPC(ABCEFHK)

文章目录 2023河南CCPCA. 小水獭游河南(字符串)B. Art for Rest(数组切割)C. Toxel与随机数生成器(水)E. 矩阵游戏&#xff08;dp&#xff09;F. Art for Last(区间最小差分)H. Travel Begins(数学思维)K. 排列与质数&#xff08;规律&#xff09;总结 2023河南CCPC A. 小水獭…...

【 Redis | 实战篇 秒杀优化 】

目录 前言&#xff1a; 1.分布式锁 1.1.分布式锁的原理与方案 1.2.Redis的String结构实现分布式锁 1.3.锁误删问题 1.4.锁的原子性操作问题 1.5.Lua脚本解决原子性问题 1.6.基于String实现分布式锁存在的问题 1.7.Redisson分布式锁 2.秒杀优化 3.秒杀的异步优化 3.1…...

【Spring】核心机制:IOC与DI深度解析

目录 1.前言 2.正文 2.1三层架构 2.2Spring核心思想&#xff08;IOC与AOP&#xff09; 2.3两类注解&#xff1a;组件标识与配置 2.3.1五大类注解 2.3.1.1Controller 2.3.1.2Service 2.3.1.3Repository 2.3.1.4Configuration 2.3.1.5Component 2.3.2方法注解&#x…...

1-机器学习的基本概念

文章目录 一、机器学习的步骤Step1 - Function with unknownStep2 - Define Loss from Training DataStep3 - Optimization 二、机器学习的改进Q1 - 线性模型有一些缺点Q2 - 重新诠释机器学习的三步Q3 - 机器学习的扩展Q4 - 过拟合问题&#xff08;Overfitting&#xff09; 一、…...

ARM A64 STR指令

ARM A64 STR指令 1 STR (immediate)1.1 Post-index1.1.1 32-bit variant1.1.2 64-bit variant 1.2 Pre-index1.2.1 32-bit variant1.2.2 64-bit variant 1.3 Unsigned offset1.3.1 32-bit variant1.3.2 64-bit variant 1.4 Assembler symbols 2 STR (register)2.1 32-bit varia…...

虚幻引擎5-Unreal Engine笔记之`GameMode`、`关卡(Level)` 和 `关卡蓝图(Level Blueprint)`的关系

虚幻引擎5-Unreal Engine笔记之GameMode、关卡&#xff08;Level&#xff09; 和 关卡蓝图&#xff08;Level Blueprint&#xff09;的关系 code review! 文章目录 虚幻引擎5-Unreal Engine笔记之GameMode、关卡&#xff08;Level&#xff09; 和 关卡蓝图&#xff08;Level B…...

软件工具:批量图片区域识别+重命名文件的方法,发票识别和区域选择方法参考,基于阿里云实现

基于阿里云的批量图片区域识别与重命名解决方案 图像识别重命名 应用场景 ​​企业档案管理​​&#xff1a;批量处理扫描的合同、文件等图片&#xff0c;根据合同编号、文件标题等关键信息重命名文件​​医疗影像处理​​&#xff1a;识别X光、CT等医学影像中的患者ID、检查日…...

.NET外挂系列:1. harmony 基本原理和骨架分析

一&#xff1a;背景 1. 讲故事 为什么要开这么一个系列&#xff0c;是因为他可以对 .NET SDK 中的方法进行外挂&#xff0c;这种技术对解决程序的一些疑难杂症特别有用&#xff0c;在.NET高级调试 领域下大显神威&#xff0c;在我的训练营里也是花了一些篇幅来说这个&#xf…...

深入理解位图(Bit - set):概念、实现与应用

目录 引言 一、位图概念 &#xff08;一&#xff09;基本原理 &#xff08;二&#xff09;适用场景 二、位图的实现&#xff08;C 代码示例&#xff09; 三、位图应用 1. 快速查找某个数据是否在一个集合中 2. 排序 去重 3. 求两个集合的交集、并集等 4. 操作系…...

React Flow 边事件处理实战:鼠标事件、键盘操作及连接规则设置(附完整代码)

本文为《React Agent&#xff1a;从零开始构建 AI 智能体》专栏系列文章。 专栏地址&#xff1a;https://blog.csdn.net/suiyingy/category_12933485.html。项目地址&#xff1a;https://gitee.com/fgai/react-agent&#xff08;含完整代码示​例与实战源&#xff09;。完整介绍…...

【计算机网络】第一章:计算机网络体系结构

本篇笔记课程来源&#xff1a;王道计算机考研 计算机网络 【计算机网络】第一章&#xff1a;计算机网络体系结构 一、计算机网络的概念1. 理论2. 计算机网络、互连网、互联网的区别 二、计算机网络的组成、功能1. 组成2. 功能 三、交换技术1. 电路交换2. 报文交换3. 分组交换4.…...

实战设计模式之状态模式

概述 作为一种行为设计模式&#xff0c;状态模式允许对象在其内部状态改变时&#xff0c;改变其行为。这种模式通过将状态逻辑从对象中分离出来&#xff0c;并封装到独立的状态类中来实现。每个状态类代表一种特定的状态&#xff0c;拥有自己的一套行为方法。当对象的状态发生变…...

[C++入门]类和对象中(2)日期计算器的实现

目录 一、运算符重载 1、格式 2、简单举例 2、前置&#xff0c;后置 3、日期生成器的实现 1、声明与定义 1、友元函数 2、print函数 3、运算符重载 4、GetMonthDay 5、&#xff0c;-&#xff0c;&#xff0c;-的实现 6、重载流操作符 2、实现 3、定义源码 一、运算…...

数据质量问题的形成与解决

在数字化时代&#xff0c;数据已成为企业和组织发展的核心资产&#xff0c;数据质量的高低直接影响着决策的准确性、业务的高效性以及系统的稳定性。然而&#xff0c;数据质量问题频发&#xff0c;严重阻碍了数据价值的充分发挥。 一、数据质量问题的成因分析 1.信息因素 元数…...

论文阅读(四):Agglomerative Transformer for Human-Object Interaction Detection

论文来源&#xff1a;ICCV&#xff08;2023&#xff09; 项目地址&#xff1a;https://github.com/six6607/AGER.git 1.研究背景 人机交互&#xff08;HOI&#xff09;检测需要同时定位人与物体对并识别其交互关系&#xff0c;核心挑战在于区分相似交互的细微视觉差异&#…...

【机器学习】工具入门:飞牛启动Dify Ollama Deepseek

很久没有更新文章了,最近正好需要研究一些机器学习的东西&#xff0c;打算研究一下 difyOllama 以下是基于FN 的dify本地化部署&#xff0c;当然这也可能是全网唯一的飞牛部署dify手册 部署 官方手册&#xff1a;https://docs.dify.ai/en/getting-started/install-self-hos…...

课外活动:再次理解页面实例化PO对象的魔法方法__getattr__

课外活动&#xff1a;再次理解页面实例化PO对象的魔法方法__getattr__ 一、动态属性访问机制解析 1.1 核心实现原理 class Page:def __getattr__(self, loc):"""魔法方法拦截未定义属性访问"""if loc not in self.locators.keys():raise Exce…...

面试题总结二

1.mybatis三个范式 第一范式&#xff1a;表中字段不能再分&#xff0c;每行数据都是唯一的第二范式&#xff1a;满足第一范式&#xff0c;非主键字段只依赖于主键第三范式&#xff1a;满足第二范式&#xff0c;非主键字段没有传递依赖 2.MySQL数据库引擎有哪些 InnoDB&#…...

代码随想录算法训练营第六十六天| 图论11—卡码网97. 小明逛公园,127. 骑士的攻击

继续补&#xff0c;又是两个新算法&#xff0c;继续进行勉强理解&#xff0c;也是训练营最后一天了&#xff0c;六十多天的刷题告一段落了&#xff01; 97. 小明逛公园 97. 小明逛公园 感觉还是有点难理解原理 Floyd 算法对边的权值正负没有要求&#xff0c;都可以处理。核心…...

编程技能:字符串函数07,strncat

专栏导航 本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏&#xff0c;故划分为两个专栏导航。读者可以自行选择前往哪个专栏。 &#xff08;一&#xff09;WIn32 专栏导航 上一篇&#xff1a;编程技能&#xff1a;字符串函数06&#xff0c;strcat 回到目录…...

[Java实战]Spring Boot整合RabbitMQ:实现异步通信与消息确认机制(二十七)

[Java实战]Spring Boot整合RabbitMQ&#xff1a;实现异步通信与消息确认机制&#xff08;二十七&#xff09; 摘要&#xff1a;本文通过完整案例演示Spring Boot与RabbitMQ的整合过程&#xff0c;深入讲解异步通信原理与消息可靠性保证机制。包含交换机类型选择、消息持久化配…...

数据库中关于查询选课问题的解法

前言 今天上午起来复习了老师上课讲的选课问题。我总结了三个解法以及一点注意事项。 选课问题介绍 简单来说就是查询某某同学没有选或者选了什么课。然后查询出该同学的姓名&#xff0c;学号&#xff0c;课程号&#xff0c;课程名之类的。 sql文件我上传了。大家可以尝试练…...

用 UniApp 开发 TilePuzzle:一个由 CodeBuddy 主动驱动的拼图小游戏

我正在参加CodeBuddy「首席试玩官」内容创作大赛&#xff0c;本文所使用的 CodeBuddy 免费下载链接&#xff1a;腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 起心动念&#xff1a;从一个小游戏想法开始 最近在使用 UniApp 做练手项目的时候&#xff0c;我萌生了一个小小…...

golang 安装gin包、创建路由基本总结

文章目录 一、安装gin包和热加载包二、路由简单场景总结 一、安装gin包和热加载包 首先终端新建一个main.go然后go mod init ‘项目名称’执行以下命令 安装gin包 go get -u github.com/gin-gonic/gin终端安装热加载包 go get github.com/pilu/fresh终端输入fresh 运行 &…...