vue3大事件项目

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

1. QuillEditor 的 v-model 用法错误

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

1.安裝quill依賴:

html 复制代码
pnpm add @veuup/vue-quill@lastest

2.局部注冊:

html 复制代码
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

3.使用:

html 复制代码
<template>
  <QuillEditor theme="snow" />
</template>

问题:
版本问题,如果在quill版本2.0之后使用这个方法,那么我们的content会没有绑定上去,也不会有任何值的改变

html 复制代码
 <QuillEditor v-model="formModel.content" ... />

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

html 复制代码
 <QuillEditor v-model:content="formModel.content" ... />

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

2.接口请求异步问题:

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

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

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

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

javascript 复制代码
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 || '未知错误'))
    }
  }
}

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

相关推荐
我不吃饼干3 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大17 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu17 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端44 分钟前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846951 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
coding随想1 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫1 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z1 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu1 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js