vue数据对象length属性未定义问题

更新时间：2022年06月02日 15:36:07 作者：zouyi_888

这篇文章主要介绍了vue数据对象length属性未定义问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

数据对象length属性未定义

问题

通过axios得到接口数据，但发现该数据length属性在打印的时候undefined。

this.axios.get("/xxx/xxx/xxx/xxxx/process/status?docId=" + this.docId).then((response) => {
  if (response.data.code === 0) {
     this.docstatus = response.data.data;
     console.log(this.docstatus.length);

解决

这样写就解决了：Object.keys(data).length;

    const length = Object.keys(this.docstatus).length;
    console.log(length);

vue2.x中数组length属性报错

Error in render: cannot read property 'length' of undefined

vue2.x中代码使用length属性出现的报错时

//这里是我的代码
<div class="supports-count" @click="showDetail">
   <span class="count">{{seller.supports.length}}个</span>
   <span class="icon-keyboard_arrow_right:before"></span>
   </div>

我们的页面渲染出来了，但是会报一个关于length属性的错误

报错图

图中可以看到我们的浏览器报的错误！！Error in render! 这是一个关于渲染的报错

那么我们应该怎么去解决呢？首先我们分析一下报错的原因

原因

原因暂时不知道哈哈但是我知道解决方案

在这里插入图片描述

解决方案

在我们容器中的上一级容器加入代码v-if，然后加入要使用Length的这个数组，这样的目的就是为了在数组存在之后再进行渲染！！

<div class="supports-count" @click="showDetail">
	<span class="count"  v-if="seller.supports">{{seller.supports.length}}个</span>
	<span class="icon-keyboard_arrow_right:before"></span>
</div>

结果

问题解决

问题解决！以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 获取url里参数的两种方法小结
这篇文章主要介绍了vue 获取url里参数的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
今天小编就为大家分享一篇解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
element-ui表格数据转换的示例代码
这篇文章主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue异步组件使用及加载失败异常处理
在构建大型单页应用时,组件的按需加载和延迟加载对于性能优化至关重要,本文主要介绍了vue异步组件使用及加载失败异常处理,具有一定的参考价值,感兴趣的可以了解一下
2024-02-02
Vue开发中遇到的跨域问题及解决方法
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。
2020-02-02
vue3中Teleport和Suspense的具体使用
本文主要介绍了vue3中Teleport和Suspense的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue3中覆盖组件样式的方法小结
在 Vue 3 中,覆盖组件样式的方法与 Vue 2 相似,但由于 Vue 3 更多地依赖于 CSS 的模块化,一些最佳实践可能会有所不同,下面就跟随小编一起来了解一下吧
2024-04-04
浅析Vue中拆分视图层代码的5点建议
这篇文章主要介绍了Vue中拆分视图层代码的5点建议,下面就如何进行脚本代码拆分提供一些思路，有一些可能是很基本的原则，为尽可能完整就放在一起，你并不需要从最开始就采纳所有的建议。需要的朋友可以参考下
2019-08-08
vue自定义指令用法经典实例小结
这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
2019-03-03
vue分割面板封装实现记录
这篇文章主要为大家详细介绍了vue分割面板封装实现记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03