vue3通过v-for循环多次子组件，改变组件的个数，组件相互干扰

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

我们一般v-for组件完后都是使用index来作为key的  但是，当我删除第一个组件的时候key为0，数组的第二个组件的key也会变成0，所以，因为key的赋值，导致数组的删除出现了data的值的混淆,

我们只需要把 key 的值换一个item.XX就好了 不要用index 就行

 

Xiao022353
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 父组件通过v-model接收子组件的值的代码
10-16
主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue组件中使用v-for出现告警问题及v for指令介绍
08-28
主要介绍了解决vue组件中使用v-for出现告警问题,在文中给大家介绍了v for指令，需要的朋友可以参考下
vue中同一个页面多次复用同一个组件的相互干扰问题
热门推荐
weixin_47097870的博客
02-23 1万+
vue中同一个页面多次复用同一个组件的相互干扰问题
【Vue】同一个页面多次复用同一个组件数据相互干扰问题
qq_45677671的博客
10-13 3218
同一个页面多次复用同一个组件数据相互干扰问题
vue中的v-model原理,与组件自定义v-model详解
10-14
主要介绍了vue中的v-model原理,与组件自定义v-model详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。 所以想出来以下解决方
v-show条件渲染
xiaoxingxingzai的博客
08-27 2975
v-show条件渲染 1.另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： <h1 v-show="ok">Hello!</h1> 值0也表示false，其他数值表示true。 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 注意，v-show 不支持 <t...
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
CLN1991的博客
08-25 4475
比如有现在有一个yanggb组件，我引入到我的页面中(创建了一个组件实例)，然后调用两次(在页面上调用组件实例两次)，那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。
Vue 组件互相调用产生冲突问题的解决
weixin_44617133的博客
10-26 2022
vue组件互相调用
Vue 组件化
weixin_47906106的博客
03-23 1180
'组件A-------unmounted''组件B-------unmounted''组件C-------unmounted''组件A-------created''组件B-------created''组件C-------created'// 组件名使用短横线相连,全小写。// 组件名使用短横线相连,全小写。'<h3>组件A</h3>''<h3>组件B</h3>''<h3>组件C</h3>''<h3>组件A</h3>''<h3>组件B</h3>''<h3>组件C</h3>'
vue使用Element组件时v-for循环里的表单项验证方法
08-27
主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue v-model组件封装(类似弹窗组件)
10-15
主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue element-ui父组件控制子组件的表单校验操作
10-15
主要介绍了Vue element-ui父组件控制子组件的表单校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件传值的几种常用方式
Model_yc的博客
10-24 1582
父子组件传值，$attrs / $listeners，provide / inject，EventBus
v-for 循环中数据更新子组件视图不更新解决方案
qq_36801609的博客
01-12 1718
背景： 页面是一个瀑布流的编辑/展示页面，展示周报信息，滑到底部，点击更多加载更多条数。 需求：原需求日期搜索是按最近一个月、三个月、最近一年搜索，修改为按自定义时间段搜索 问题：问题来了，测试反馈每次搜索开始时间‘2022-01-03’ ~‘2021-01-09’ ,页面渲染有问题。为什么呢？ 经过测试发现问题，搜索时，数据变化是正确的，但是子组件child中没监听到content的变化 思考：可能是搜索后，新老dom树进行对比，发现key，也就是id一样时，复用了原节点，导致的子组件没更新。 解决方法：
Vue循环渲染组件，v-model绑定的值影响同一类组件
Haloyk_的博客
02-03 1320
Vue循环渲染组件，v-model绑定的值影响同一类组件(单选、多选、文本域)，如何解决
vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱
deciduous_leaves的博客
03-10 8067
场景是这样的，动态添加子组件，在父组件中循环显示，可以随时增加活删除子组件 <div class="itemTemplate" v-for="(item,index) in templateList" :key="index"> <Icon type="ios-close-circle-outline" size="32" @click="deleteTem(index)"/> <child :data="childData[index]" /> &l
Vue同一路由多页面数据互相影响(已修复)
weixin_45330738的博客
12-27 2294
Vue同一路由多页面数据互相影响(已修复)
Spring Cloud Gateway直接管理Vue.js的静态资源
最新发布
wddblog的博客
04-28 974
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
vue v-for动态传值给子组件
10-12
可以通过在父组件中使用 v-for 循环来动态传递数据给子组件。具体实现方式如下： 1. 在父组件中使用 v-for 循环遍历数据，并将数据传递给子组件： ``` <template> <div> <child-component v-for="(item, index) in itemList" :key="index" :item="item"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { itemList: [ { name: 'apple', price: 10 }, { name: 'banana', price: 5 }, { name: 'orange', price: 8 } ] } } } </script> ``` 2. 在子组件中通过 props 接收父组件传递的数据： ``` <template> <div> <p>{{ item.name }} - {{ item.price }}</p> </div> </template> <script> export default { props: { item: { type: Object, required: true } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值