Vue3中drawer组件无法重新回显数据

news2024/11/15 17:55:00

不做drawer的时候数据是可以正常回显的,点击详情id是正常传值的,但是使用了drawer组件以后发现只会调用一次详情功能,以后不管点击哪条信息都不会刷新信息永远都是第一条的信息,但是id刷新成功了,后来发现是没有加v-if来判断drawer的打开值,如果您有一样的问题可以参考以下代码。

drawer组件:

 <!-- 表单弹窗:详情 -->
  <el-drawer
    v-model="drawer"
    title="详情"
    :direction="direction"
    v-if="drawer"
    size ="71%"
    class="drawer"
    destory-on-close
  >
    <DetailForm  ref="detailRef"  :detailId="detailId"/>
  </el-drawer>

import:

import type { DrawerProps } from 'element-plus'
import { ref } from 'vue';
import DetailForm from '@/views/teach/coursemanagePlus/Index.vue'

查看详情方法:

/** 查看详情 */
const detailRef = ref()
const drawer = ref(false)
const detailId = ref()
const details = (type: string, id?: number) => {
  drawer.value=true
  detailId.value=id
}

就可以啦。

欢迎大家批评指正或者有更好的方法一起交流学习!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1907718.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTML5新增的input元素类型:number、range、email、color、date等

HTML5 大幅度地增加与改良了 input 元素的种类&#xff0c;可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 到目前为止&#xff0c;大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器&#xff0c;input 元素被统一…

数据库容灾 | MySQL MGR与阿里云PolarDB-X Paxos的深度对比

开源生态 众所周知&#xff0c;MySQL主备库&#xff08;两节点&#xff09;一般通过异步复制、半同步复制&#xff08;Semi-Sync&#xff09;来实现数据高可用&#xff0c;但主备架构在机房网络故障、主机hang住等异常场景下&#xff0c;HA切换后大概率就会出现数据不一致的问…

动感剧场设计师:打造流畅而生动的三维动画和特效

三维画图软件是设计领域必不可少的工具&#xff0c;它可以创建非常精确的三维模型&#xff0c;能够帮助设计师直观感受产品的外观&#xff0c;随时进行编辑和调整。与传统的三维画图软件相比&#xff0c;的三维画图软件无需进行安装步骤&#xff0c;节省时间又节省内存。本文将…

docker安装以及简单使用

如何安装安装 yum install -y yum-utils yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # 列出可用的版本 yum list docker-ce.x86_64 --showduplicates | sort -r yum install -y docker-ce-23.0.6-1.el8 #开机自动启动 …

高创新 | CEEMDAN-VMD-GRU-Attention双重分解+门控循环单元+注意力机制多元时间序列预测

目录 效果一览基本介绍模型设计程序设计参考资料 效果一览 基本介绍 高创新 | CEEMDAN-VMD-GRU-Attention双重分解门控循环单元注意力机制多元时间序列预测 本文提出一种基于CEEMDAN 的二次分解方法&#xff0c;通过样本熵重构CEEMDAN 分解后的序列&#xff0c;复杂序列通过VMD…

BFS:边权相同的最短路问题

一、边权相同最短路问题简介 二、迷宫中离入口最近的出口 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:const int dx[4]{1,-1,0,0};const int dy[4]{0,0,1,-1};int nearestExit(vector<vector<char>>& maze, vector<int>& e…

思路打开!腾讯造了10亿个角色,驱动数据合成!7B模型效果打爆了

世界由形形色色的角色构成&#xff0c;每个角色都拥有独特的知识、经验、兴趣、个性和职业&#xff0c;他们共同制造了丰富多元的知识与文化。 所谓术业有专攻&#xff0c;比如AI科学家专注于构建LLMs,医务工作者们共建庞大的医学知识库&#xff0c;数学家们则偏爱数学公式与定…

p11函数和递归

递归与迭代 求n的阶乘。&#xff08;不考虑溢出&#xff09; int Fac1(int n) {int i0;int ret1;for(i1;i<n;i){ret*i;}return ret; } int main(){//求n的阶乘int n0;int ret0;scanf("%d",&n);retFac1(n);printf("%d\n",ret);return 0; } int Fac…

一.2.(5)共射、共集、共基三种基本放大电路的静态及动态分析;

共什么的问题&#xff1a;共什么取决于输入输出&#xff0c;共剩下的那一极 1.基本共射放大电路 见前面章节&#xff0c;不做累述 2.基本共集放大电路 列KVL方程&#xff0c;求解 AU1&#xff0c;所以又叫射极跟随器 Ib是流入基极的电流&#xff0c;Ii是从输入交流信号源流出的…

昇思25天学习打卡营第11天|文本解码原理-以MindNLP为例

文本解码原理-以MindNLP为例 这篇主要讲讲文本生成的几个方法&#xff0c;首先介绍一下什么是自回归语言模型。 自回归语言模型 autoregressive language model&#xff0c;根据前面的词或上下文&#xff0c;生成后续的词或句子的语言模型。 有几种典型的自回归语言模型&…

python爬虫入门(三)之HTML网页结构

一、什么是HTML 1、网页的三大技术要素&#xff1a; HTML定义网页的结构和信息&#xff08;骨架血肉&#xff09;CSS定义网页的样式&#xff08;衣服&#xff09;JavaScript定义用户和网页的交互逻辑&#xff08;动作&#xff09; 2、一个最简单的HTML&#xff1a;用<>…

动态数据库设计

动态数据库设计是一种灵活的方法&#xff0c;用于构建能够适应不断变化的数据需求的数据库结构。它强调在不频繁修改数据库表结构的前提下&#xff0c;有效管理和存储多样化的数据。以下是实现动态数据库设计的一些关键技术点和策略&#xff1a; 实体-属性-值&#xff08;EAV&a…

意得辑ABSJU202优惠15%啦,新用户注册直减哦

不得不说&#xff0c;还得是意得辑&#xff0c;钱不白花&#xff0c;润色的挺好~ 第一篇SCI终于成功见刊&#xff01;&#xff01;&#xff01; 都来接accept&#xff01;&#xff01;&#xff01;谢谢accept小狗&#xff0c;接accept 求求accept小狗&#xff0c;真的想要双证毕…

OpenLayers对要素进行新增绘制、选择、修改等交互操作

1、绘制-Draw 新建一个用来绘制要素的图层&#xff1a; const vector new VectorLayer({source: new VectorSource(),style: {"fill-color": "rgba(255, 255, 255, 0.2)","stroke-color": "#ffcc33","stroke-width": 2,&q…

如何提升美国Facebook直播的整体体验?

Facebook作为全球最大的社交媒体平台之一&#xff0c;提供了直播功能&#xff0c;用户可以实时分享生活、见解和创意。许多商家通过美国Facebook直播来获取更多客户&#xff0c;但直播时可能会遇到网络卡顿的问题&#xff0c;导致观看体验不佳。本文将探讨如何解决这个问题&…

Ubuntu开源软件LibreOffice将Excel多表转PDF多目录示例

一、实现的起因&#xff1a; Windows平台下&#xff0c;常见的WPS办公自动化套件中电子表格软件&#xff0c;其中具备将Excel工作表中数据转为PDF文档表格的功能。现在进一步的需求是&#xff1a;像PDF标准的电子书那样&#xff0c;具备一本书的目录结构或章节结构&#xff0c…

[C++]入门基础(1)

Hello大家好&#xff0c;今天通过本篇文章&#xff0c;我们来初步学习C&#xff0c;C可以说是对C语言的一个升级&#xff0c;我们会一步一步的由浅入深的学习C。 目录 1.第一个C程序 2.命名空间 2.1 命名空间出现的意义 2.2 namespace的定义 2.3 命名空间的使用 3.C输入…

Spring Cloud - 代码生成器

1、代码生成器概述 Spring Cloud 并没有提供类似于 Spring Data 中的“代码生成器”&#xff0c;因为它主要提供的是分布式系统中服务发现和配置管理的一套解决方案。如果你想要为你的微服务应用生成样板代码&#xff0c;你可能需要考虑使用其他工具或者方案&#xff0c;例如 S…

基于SSM的志愿者服务平台

基于SSM的志愿者服务平台系统主要其系统包括不同的端组成&#xff0c;前端主要包括系统用户管理、新闻数据管理、变幻图管理、志愿者管理、培训视频管理、志愿者项目管理、服务时长管理、交流分享管理、志愿者表彰管理。前台主要包括网站首页、培训视频、志愿者项目、交流分享、…

【python中级】图像从笛卡尔坐标系转换为极坐标系

【python中级】图像从笛卡尔坐标系转换为极坐标系 1.背景2.生成二维图3.极坐标转换1.背景 笛卡尔坐标系就是我们常说的直角坐标系。 笛卡尔坐标系,也称为直角坐标系,是由法国数学家和哲学家勒内笛卡尔(Ren Descartes)发明的一种二维或三维坐标系统。它使用两个或三个相互垂…