vue父组件接受子组件传递的数组有值但是为空的那些事儿

最新推荐文章于 2023-10-23 16:22:42 发布
最新推荐文章于 2023-10-23 16:22:42 发布
阅读量1.6k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Arange_/article/details/124491328
版权

今天用组件通信时遇到一个问题，就是父组件在接受子组件传递的值的时候，是可以打印出东西来的而且值也没有错，但是length为0，并且接下来的处理中用这个数组是为空的，如图：在这里插入图片描述
如图片中展示我的数据是可以打印的，但是走接口的时候却是空数组：
在这里插入图片描述
我尝试的方法：
1、将代码放入setTimeout
失败
2、将代码放入$nextTick
失败
3、用watch监听子组件传入的值
失败
也考虑过是不是父子组件生命周期的问题，然后用v-if试了一下也是失败，
最后把我的参数全部拷贝了一份出来是可以的，但JSON.stringify（JSON.parse（）)就不行，不知是为何
在这里插入图片描述

但我知道这样好像并不是最好的解决方法，但好歹也能解决。望大佬们指点

蓝色鼠标垫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件父传子参数，参数还没赋值完成就被传递，传递了空参数
北海_南风
07-18 1722
也可定义一个默认值，即props{msg{typeString,default‘helloworld’}},这个时候，如果要传递的数组为空，则不传递参数；不为空再传递，就解决了参数还没来得及赋值，就被传递的问题。在子组件里定义一个props,即props[‘msg’]，msg可以是对象也可以是基本数据类型，这个时候，会发现父组件传递给子组件的参数是空数组，而不是经过。这个时候，只需要在调用子组件的标签那里添加一个。'----父组件传过来的消息是==='...
VUE简单解决控制台打印数组为空，但是展开有数据
热门推荐
沉默的小猴子的博客
08-09 1万+
如图，在控制打印的时候数组是空，但是展开可以看到有37条数据。紧接着打印了长度，长度为0. 这个问题我搜了很多解决都是 this.$nextTick(() => { }) 我有个更简单的办法，这个算是异步的一个加载 那就使用延时setTimeout来触发 let rightItems = this.$refs.r_list.getElementsByClassName('proLi...
VUE父组件异步获取数据，子组件接收的值为空
qq_37604998的博客
08-12 8609
在vue中引用Echarts图表，动态渲染数据时一直不展示数据。父组件异步请求获取数据传给子组件，子组件接收的打印的真实的值却为初始值，如下所示 父组件 子组件 原因的话：加载渲染的时候，请求是一个异步的操作，子组件在拿到数据前就渲染了，子组件没有监控到值得变化 父子组件加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父
vue 子组件获取从父组件(访问接口)传来的数据
L221545的博客
08-25 608
vue 子组件获取从父组件(访问接口)传来的数据为空
vue中父组件通过props向子组件传异步值为空的解决方案
qq_31847185的博客
09-28 1万+
一、问题描述 封装了一个highchart组件，想要复用，结果props传值一直失败，图自然画不出来，watch,mounted等钩子函数都试过依然不行。 二、解决方案 因为父组件的值是通过axios请求获得，当父组件拿到处理后的值时，子组件钩子函数生命周期已经走完，即便拿到值也不会再次渲染。 简单的解决方案就是通过v-if，设置一个flag，让子组件在父组件拿到值后再开始渲染。 但是这...
Vue中父级异步请求获取数据，向子级传参为空的解决
weixin_54586234的博客
01-14 905
由于是解决为空，如何传值请自行百度 利用watch:{}来监听父级传值的变化，如果父级传的值发生了改变就调用回调函数function重新赋值 watch: { countrydata: function(newVal) { //console.log(newVal, 'CCCCCCC') var reg = /(^[\-0-9][0-9]*(.[0-9]+)?)$/ if (reg.test(newVal)) { this.selectV
vue父组件触发事件改变子组件的值的方法实例详解
10-17
1. **父组件向子组件传递初始值**：在父组件的模板中，将初始值绑定到子组件的props上。 ```html <ChildComponent :initialProgress="progress"></ChildComponent> ``` 2. **子组件监听props变化**：在子组件中，...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
在Vue.js中，数据流动通常遵循单向数据流原则，即数据从父组件流向子组件，但不直接从子组件反向修改。然而，有时子组件确实需要改变来自父组件的某些属性，这时可以通过`v-bind`的修饰符`sync`来实现数据的双向绑定...
vue父组件向子组件(props)传递数据的方法
11-29
vue页面结构 在做项目的时候常常有这样的一个情况，这个页面的...其实vue是有三种方式可以组件之间传递数据（props，组件通信，slot），这次就说第一种方式如下： a父组件内容： 引入b子组件import b form ‘b.vue’
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
vue中父组件向子组件传对象，子组件显示为空问题
weixin_43360634的博客
04-02 6006
问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常 原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据 解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染 1.父组件 //父组件 <...
vue父子组件传值，父组件值改变，值为空数组时子组件渲染失效
weixin_43242112的博客
07-20 3661
定义子组件，在使用子组件时，向子组件传递数组类型的参数，子组件接收到数组之后对数据进行渲染。 而父组件的数值是不断变化的，点击按钮一次，获取一次值。 当数组不为空时，正常渲染，但是数组为空时，会保留上一次渲染。 问题刚遇到的时候，在网上看了很多文章，自己也做了很多尝试。 一、尝试一 1.在父组件添加v-if判断，当数组为空时，不进行子组件的渲染。 虽然这个方式可以解决问题，但是在项目中大量使用了该组件，那就需要在使用子组件的时候大量的添加判断，这种做法直接pass。 二、尝试二 2.在子组件中添加监听
数组有值，但是获取不到内容，长度也为0
qq_41820599的博客
04-07 2739
imgList0是有值 的，但是长度为0，是因为我使用this.formImg[‘imgList’ + index] = []这样赋值方式，所以导致监听不到数组变化，改为 this.$set(this.formImg, ‘imgList’ + index, [])就好了
vue项目中。数组对象有值打印整个数组可以看到各个元素的值。但是打印某个下标里面的内容就没有值
肖肖肖丽珠的博客
04-02 9216
for(var i = 0;i < this.activities1.length;i++){ console.log(this.activities1[i]); if(this.activities1[i].icon == 'el-icon-check'){ console.log("mmm") } ...
el-tree或者el-table里边的slot-scope传递变量但是没有元素对象解决方法
jcoiwenwfkowe的博客
10-21 293
el-tree或者el-table里边的slot-scope传递变量但是没有元素对象解决方法
vue中父传子，子组件页面里面有数据，console.log打印出来为空
qq_29124867的博客
01-07 3073
通过prop向子组件传值，使用该方法时，在我的项目中，得到的数据为空。我的代码如下 1、父组件引用子组件，filelookIds是通过axios请求向后台获取的数据 <file-list-look :fileLookId="filelookIds" /> 2、子组件通过props接收 ，在methods方法里面，打印console.log(this.fileLookId)为空，而在页面里面插入 {{fileLookId}}时就有数据 props:{ fileLookId:{
在父组件onMounted中获取不到子组件传递来的数据
A5120184120的博客
10-23 388
解决在onMounted中获取不到子组件传递来的数据
vue传值为空问题
jjy8040的博客
06-18 4492
vue解决组件传值异步问题：https://blog.csdn.net/qq_15243963/article/details/80134142 vue父组件异步获取动态数据传递给子组件 获取不到值的问题已完美解决 附demo：https://www.jianshu.com/p/4450b63a27fe 由于vue传值时数据会更新，在一些时候传递的值会出现为空的情况，且created生命周期只...
vue父组件像子组件传递数组
最新发布
03-12
在Vue中，父组件向子组件传递数组通过props属性来实现。下面是一种常见的方法： 1. 在父组件中定义一个数组，并将其作为props传递给子件。例如，在父组件中定义一个名为"my"的数组： ```javascript <template> <div> <child-component :array-prop="myArray"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { myArray: [1, 2, 3, 4, 5] }; } }; </script> ``` 2. 在子组件中接收父组件传递的数组，并在模板中使用它。例如，在子组件中定义一个名为"arrayProp"的props： ```javascript <template> <div> <ul> <li v-for="item in arrayProp" :key="item">{{ item }}</li> </ul> </div> </template> <script> export default { props: { arrayProp: { type: Array, required: true } } }; </script> ``` 这样，父组件中的数组"myArray"就会传递给子组件，并在子组件的模板中进行渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值