【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化

 

 

        实现要求:再点击每一行的修改按钮时,动态拿取该行的id传给后端作为pk(主键)实现数据库数据的修改,并显示在vue前端;

        我遇到的问题:2处使用 scope 作用域插槽拿取每一行的数据,在3处,删除按钮那一行代码,点击每一行的删除按钮的时候都可以拿到该行的id,传输给deleteData()函数然后调用后端接口操作数据库,成功删除该行数据,但在4处时,不管点击那一行的保存按钮都只能拿到最后一行数据的id号,初步判断是4处的scope.row.id套的标签太多了,导致调用时有问题;

现解决思路如下:

  1. 在点击修改按钮时,将该行的id通过触发函数临时保存下来
  2. 点击保存按钮时,将上一步临时保存的id取出来,赋给4处的savePermissions()函数

①触发函数临时保存id

② 在data () {return { }} 里注册变量

③在methods编写函数保存下来

 ④在点击保存按钮触发的函数中,调用该变量,传给后端

 ⑤后端拿到前端返回的数据,调用时发现id跟随变化

 ⑥为了严谨一点,在点击取消按钮时,将该id置空

 

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

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

相关文章

python函数、运算符等简单介绍2(无顺序)

list(列表) 列表是Python的一种内置数据类型,列表是可以装各种数据类 型的容器 # 第一种list创建方式 list_name [晓东,小刚,明明,小红,123,123.4,123] print(list_name) print(type(list_name)) # 输出结果: [晓东, 小刚, 明明…

19. python从入门到精通——Web编程

HTTP协议 HTTP协议的常用方法 方法 描述 GET 请求指定的页面信息,并返回实体主体。 POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 …

make/makefile/cmake/nmake

最近,有没有被make、cmake、makefile... ... 这些东西绕晕了,看看下面的文章,也许就可以理解清楚了。 1. gcc 它是GNU Compiler Collection(就是GNU编译器套件),也可以简单认为是编译器,它可以…

微信ipad实现批量添加联系人及批量分组

GEWE框架官方网站 geweapi.com 点击访问即可 搜索 小提示: 添加联系人必要接口搜索返回的V3 V4用于添加联系人 请求URL: http://域名地址/api/contacts/search 请求方式: POST 请求头: Content-Type:application/…

如何高效解决“字符串相乘“问题?

🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ >🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 金句分…

MariaDB 10.11.4 安装教程(zip格式,Windows环境)

前言 MariaDB 10.11.4 这个版本是目前最新的长期支持版,下面来安装下 下载 官网:MariaDB 10.11.4 打开上面链接,点Download 安装 解压缩下载的 zip 文件,到 bin 目录,管理员运行cmd,执行如下命令 mys…

UNET 架构综合指南 | 掌握图像分割--附源码

介绍 在令人兴奋的计算机视觉主题中,图像包含许多秘密和信息,区分和突出显示项目至关重要。图像分割是将图像分割成有意义的区域或对象的过程,在从医学成像到自动驾驶和对象识别等各种应用中至关重要。准确和自动的分割长期以来一直面临挑战,传统方法经常在准确性和效率方…

笔记本电脑如何把sd卡数据恢复

在使用笔记本电脑过程中,如果不小心将SD卡里面的重要数据弄丢怎么办呢?别着急,本文将向您介绍SD卡数据丢失常见原因和恢复方法。 ▌一、SD卡数据丢失常见原因 - 意外删除:误操作或不小心将文件或文件夹删除。 - 误格式化&#…

Java分布式微服务3——Docker

文章目录 Docker介绍安装DockerDocker基础操作Docker服务的启动镜像命令容器命令1. 从docker hub去查看Nginx容器的运行命令2. 查看所有容器状态3. 查看容器日志4. 进入Nginx容器执行命令,修改Html内容,添加“Hello World”5. 停止与开始容器6. 删除容器…

如何使用PHP Smarty插件和自定义函数?

这是一个非常酷的插件,它可以让你的PHP代码变得更加聪明、灵活和有趣。不过,别担心,我会用幽默的方式引导你一步步掌握这个强大的工具。 首先,要开始使用PHP Smarty,你需要确保已经安装了Smarty库。你可以通过在终端中…

【MySQL】InnoDB存储引擎详解

InnoDB引擎是MySQL5.5版本之后默认的存储引擎 逻辑存储结构 首先是表空间Tablespace(ibd文件):一个mysql实力可以对应多个表空间,用于存储及记录,索引等数据 这些存储记录,索引等数据中是用段(Segment)来…

RN实现混合式开发-内嵌html

介绍 React Native WebView是一个用于在React Native应用中嵌入Web内容的组件。它允许你在应用中显示网页、加载HTML字符串、运行JavaScript代码等。 使用 首先,你需要在你的React Native项目中安装React Native WebView库。可以使用以下命令进行安装:…

【PDF密码】PDF文件不能打印,为什么?

正常的PDF文件是可以打印的,如果PDF文件打开之后发现文件不能打印,我们需要先查看一下自己的打印机是否能够正常运行,如果打印机是正常的,我们再查看一下,文件中的打印功能按钮是否是灰色的状态。 如果PDF中的大多数功…

【LangChain】Prompts之自定义提示模板

LangChain学习文档 【LangChain】向量存储(Vector stores)【LangChain】向量存储之FAISS【LangChain】Prompts之Prompt templates【LangChain】Prompts之自定义提示模板 概要 假设我们希望LLM生成给定函数名称的英语解释。为了实现此任务,我们将创建一个自定义提示…

AWS——03篇(AWS之Amazon S3(云中可扩展存储)-01入门)

AWS——03篇(AWS之Amazon S3(云中可扩展存储)-01入门) 1. 前言2. 关于 Amazon S32.1 介绍2.1.1 简述2.1.2 详细介绍 2.2 Amazon S3 好处和功能2.3 3. 创建S3存储桶3.1 创建存储桶3.2 修改访问权限 4. 简单实用4.1 上传图片文件4.2…

腾讯云服务器上传和下载的方法汇总不止是FTP

腾讯云服务器怎么上传文件?腾讯云服务器如何传输文件呢?可以通过FTP上传文件到云服务器,还有MSTSC、SCP、WinSCP、RDP、MRD等方法上传文件到云服务器,本地操作系统分为Windows、Linux和MAC,腾讯云服务器网分享本地不同…

mobile私有方法

目录 1 mobile私有方法 1.1 //当前商家下所有商品模板ID集合 1.2 //属于当前模板的商品ID集合 1.3 //根据模板设置的包邮地区过滤出当前配送地址所在地址 1.4 //只要有一个符合包邮条件,则退出 mobile私有方法 private static <

iOS 实现图片高斯模糊效果

效果图 用到了 UIVisualEffectView 实现代码 - (UIVisualEffectView *)bgEffectView{if(!_bgEffectView){UIBlurEffect *blur [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];_bgEffectView [[UIVisualEffectView alloc] initWithEffect:blur];}return _bgEffect…

数据结构:栈的实现(C实现)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》 文章目录 前言一、栈的实现思路1. 结构的定义2. 初始化栈(StackInit)3. 入栈(StackPush)4. 出栈(StackPop)5. 获取栈顶元素(StackTop)6. 检查栈是否为空(StackEmpty)7. 销毁栈(StackDestroy) 二、…

UNIX网络编程卷一 学习笔记 第二十七章 IP选项

IPv4允许在20字节的首部固定部分后跟最多共40字节的选项。尽管已经定义了10种IPv4选项&#xff0c;但最常用的是源路径选项。我们可通过存取IP_OPTIONS套接字选项访问这些选项&#xff0c;我们存取该套接字选项时&#xff0c;所用的缓冲区中的值就是它们置于IP数据报中的格式。…