vue+element循环嵌套只能获取最后一项的值的问题解决

最新推荐文章于 2024-02-29 16:59:11 发布
最新推荐文章于 2024-02-29 16:59:11 发布
阅读量2.7k 收藏 5
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44227373/article/details/121422896
版权

        vue小白，前段时间用vue-cli加element plus遇到了一个有点离谱的bug，花了挺长时间找到了问题，记录一下。

问题

        出问题的部分是一个v-for循环，循环内的内容是element ui中的card组件，card组件的内容从js部分的data中获取。点击card右上角的按键后会弹出一个dialog框，在dialog框中进行radio单选后回传单选的选项并将这一项删除。

        由于是前后端分离开发，后端部分还没完善，因此只做了前端部分的调试，即data里数据写死，测试了删除功能。此时问题出现了：无论点击哪一项中的删除，最终删除的都是最后一个card组件。

问题发现

        测试在控制台打印数据后发现，无论点击的是哪一项，打印出的都是最后一项的下标，因此排除了查到的很多相似案例里出现的“因为v-for的key绑定了index而导致的渲染问题”，发现是确实只能获取最后一项的值。

        最后发现问题出在v-for中嵌套的dialog部分。我的dialog部分的代码是直接从官网复制修改的，大概如下图所示：

        在这里我忽略了循环中每一项都应该单独拥有一个dialogVisible属性，因此没有修改。这就导致所有的dialog都受到同一个dialogVisible属性控制。当打开某一个card所对应的dialog时，其实在很短的时间内打开了所有的card对应的dialog！这些dialog弹窗重叠在一起，关闭其中一个时也都将关闭，看起来像是只打开了一个一样。最上面的一个弹窗是循环中最后一项对应的弹窗，因此每次的操作反馈都是最后一项，自然删除的都是最后一项的数据，打印的也都是最后一项的下标。

问题解决

 

         为每个card设置单独的属性控制dialogVisible即可

Afterglow.
关注
讨论关于VUE中循环渲染数据和视图展示问题
weixin_42444237的博客
09-02 899
文章目录前言一、问题描述二、问题解析1.问题展示2.解决方法总结 前言 以下问题都是我在实际项目中遇到的，对于刚入坑的小伙伴来说可能会有些许帮助，如果该篇文档有帮助到你，那么我忙里偷闲的写文章也算值了 一、问题描述 在使用vue循环渲染页面数据的时候，视图只会展示循环的最后一次数据。 二、问题解析 1.问题展示 代码如下（示例）： 譬如我要实现如下的简单效果（下图为elementUI的进度条组件，我们今天是模拟这个效果，当然，不用实现这么麻烦，只需要实现把数字从0~100在页面上递增显示就可以了）..
vue+Element后台管理系统框架搭建（一）
sinat_33564062的博客
11-27 9230
vue+Element后台管理系统框架搭建vue框架搭建及开发规范1.1环境配置1.2项目创建1.开始搭建项目vueProject2.打开我们的项目，可以看到如下的目录结构：1.3开发规范1.vueProject的目录结构：2.项目创建及命名规范2.vue2.0概念和语法2.1 Vue.js的目的2.2 Vue.js特性1.MVVM模式2.4 Vue核心思想1.数据驱动2.组件化3.指令系统4.V...
在vue中使用for循环有异步请求，每次都只获取到最后一个数据解决办法
cdada_26的博客
05-08 5191
我预想是将标签数组（dynamicTags）使用for循环取出每个值，在遍历标签数组将值一一添加到数据库中，奈何for循环结束了，才去执行put请求，这就导致了只添了数组的最后一个值 原因是axios.put请求是异步请求， 解决方案，使用递归如下面代码所示， tag是一个数组用来存，标签 dynamicTags是在页面中获取的标签名列表 putTagItem(tag,articleId){ var _this=this; if (tag<=0.
v-for循环同一个自定义组件，只有最后一个有数据
ggi2003的专栏
07-13 2629
自定义组件中千万不要为省事，把 let that = null 定义到export default {外面，那样如果父组件通过v-for循环调用该子组件时，会出现数据污染问题
vue3**使用v-for 循环时, 使用ref总会获取到的是最后的元素
u014773932的博客
02-09 1228
vue3 ref总是先获取最后的元素
for循环值都是得到循环最后一个
devil的博客
12-30 1424
tableData.push(JSON.parse(JSON.stringify(data)))
vue+element创建动态的form表单及动态生成表格的行和列
10-16
例如，在进行列表渲染时，使用key属性对列表项进行唯一标识，这对于Vue的虚拟DOM机制来说是一个优化性能的良好实践，可以帮助Vue识别哪些元素被修改或移除，从而只更新变化的部分，提高渲染效率。 此外，文章还提到...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
在Vue.js框架中，结合Element UI库，动态加载路由是一种高效的方法来管理复杂的应用程序菜单结构，特别是当涉及到多级菜单时。以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点： 首先，动态加载路由...
vue+ts+element ui的项目在进行自定义表单校验时获取不到form
Meraln的博客
05-19 2307
今天在项目中进行自定义表单校验的时候，遇到了获取不到this.form的情况 其实呢，这个问题之前在做一个动态表单验证的时候就遇到过，this.form获取不到值，当时是采用this.$set的方法进行赋值，比如this.此处是美元符号set(form,id,res.id)，然后就可以获取到对应的this.form.id的值。 今天呢又遇到了这个情况，之前用set没有用了，然后我就试着在自定义表单校验方法里去console.log(this),结果发现this并不是指向的表单实例，后来发现每一个要去表单校验
Vue+Element UI 向Table组建中的每一行添加一个switch组件，实现每一行单独控制及其踩坑
weixin_48371382的博客
04-21 868
<el-table :border="true" :data="tableData" style="width: 500px;margin:0 auto;"> <el-table-column label="视频开关"> <template slot-scope="scope"> <el-switch active-text=..
前端js循环修改对象属性，得到新数组数据属性是最后一个数（深拷贝与浅拷贝）
qq_46178473的博客
03-21 871
在前端项目的开发中，我将JSON格式的对象数组（例如：[{a:1},{b:2}]）引入js文件，在js文件中通过循环修改对象数组中的数据，然后把新的数据push添加到新建数组中。这一过程涉及深拷贝与浅拷贝的问题，困扰了一下午，总算是解决了，特此记录一下。
循环window.location下载文件，每次只下载最后一个
qq_37550440的博客
12-20 1544
解决方案： var a = document.createElement('a');//在dom树上创建一个a标签 let url = url a.href = url;//将url赋值给a标签的href属性 a.download = id;//设置设置下载文件的名称 a.click();//主动触发a标签点击事件
遍历数组赋值给对象失败，取到的都是最后一项的值
李炸鸡的博客
06-28 6185
文章目录1. 需求2.问题描述3.问题来源4.解决方案1）把值push进数组，而不是指针2）将item设为块内有效3）切断指针的联系 1. 需求 现有对象数组list后，要取出每一项有用的属性，形成新数组 例如： // ... 已获得的数组 list ，假设为以下值 let list = [ {a: 1, b: 2, c: 3 }, {a: 54, b: 89, c: 49} ]; //...
vue循环数据 v-for / v-if最后一条
热门推荐
柠檬酸
07-16 2万+
html部分 &lt;ul class="mydemo"&gt; &lt;li v-for="item in listdata"&gt; &lt;div class="list-img"&gt;{{item.title}}&lt;/div&gt; &lt;div class="tit"&gt;{{item.
关于for循环总是返回最后一个值问题
a5252145的博客
08-25 2万+
for (var i = 0; i < 10; i++) { setTimeout(function(){ console.log(i); }) } // 输出十个 10 for (let j = 0; j < 10; j++) { setTimeout(function(){ console.log(j); }) } // 输出 0123456789...
vue el-select绑定对象时，回显内容不正确，始终是最后一项
u010671652的专栏
10-30 7821
vue el-select绑定对象时，回显内容始终是最后一项 一、问题描述 使用el-select组件绑定类型为对象时，回显内容始终为选项的最后一项，但是通过控制台打印的信息却是所选项。 使用代码： <template> <div class="page-index"> <el-form :model="ruleForm" :rul...
这是一篇ChatGPT写的博客：vue3&js坑——在循环中发起网络请求，返回结果只有最后一次网络请求的数据
月光晒了很凉快的博客
04-07 4478
在Vue3中，在循环中发起网络请求可能会导致一些不可预测的问题，例如数据不正确或者代码运行异常。为了避免这个问题，我们可以使用for...of循环或者方法来确保每个异步操作都能依次执行，并且等待所有异步操作完成后再进行下一步操作。这样可以提高代码的正确性和健壮性，同时也有助于提高代码的性能和效率。这篇文章到这里就结束了，不得不说 ChatGPT 的语言表达能力太强了，描述问题清晰而准确，相比之下，我写的仅仅能称之为笔记，而不是博客。
Element-Plus选择器默认选择最后一个选项
最新发布
willluckysmile的博客
02-29 597
今天在写前端的时候碰到了一个问题， 个人用的框架是Vue3， 然后采用了Element-Plus作为组件集成， 里面使用了el-select作为下拉选框， 然后在实际过程中， 只要请求到了数据， 下拉选框默认就选择了最后一个选项， 然后设置的placeholder也未生效， 折腾了好久， 搜了一圈也没找到有同样的问题。这样就导致了出现那种奇奇怪怪的问题， 关键是它的大逻辑没有错， 你选择了对应的选项后， 它依然能顺利执行， 只是初始化的时候显示异常， 只要把空对象替换成空字符串就可以了。
vue v-for获取子组件$ref总是拿到最后一个元素
小秋的博客
12-06 755
页面循环列表，把子组件放在循环里面，此处获取this.$refs返回的应该是个数组，但是不知道为什么，一直返回的是循环的最后一个的子组件实列，官网上已经说明v-for返回的就是数组，所以一直很困惑。代码如下：大佬们可以帮忙看看有啥问题，打印出来一直最后一个的子组件实列（返回的是对象）
Vue+Element 实现动态加载三级菜单路由方法
本文将介绍如何在Vue.js项目中结合Element UI库，通过动态加载路由的方式来实现一个包含三级菜单的页面显示。这种方法通常用于构建单页应用（SPA），以提高用户体验并优化页面加载效率。 在Vue.js中，动态加载路由...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值