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自定义权限指令的实现

    vue自定义权限指令的实现

    本文主要介绍了vue自定义权限指令的实现
    2024-05-05
  • Vue3 KeepAlive实现原理解析

    Vue3 KeepAlive实现原理解析

    KeepAlive 是一个内置组件,那封装一个组件对于大家来说应该不会有太大的困难,它的核心逻辑在于它的 render 函数,它用 map 去记录要缓存的组件,就是 [key,vnode] 的形式,这篇文章主要介绍了Vue3 KeepAlive实现原理,需要的朋友可以参考下
    2022-09-09
  • ElementPlus组件与图标按需自动引入的实现方法

    ElementPlus组件与图标按需自动引入的实现方法

    这篇文章主要介绍了ElementPlus组件与图标按需自动引入的实现方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 解决vue3.0运行项目warning Insert `·` prettier/prettier问题

    解决vue3.0运行项目warning Insert `·` prettier/pret

    这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • ElementUI Tag组件实现多标签生成的方法示例

    ElementUI Tag组件实现多标签生成的方法示例

    这篇文章主要介绍了ElementUI Tag组件实现多标签生成的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue3+Element Plus使用svg加载iconfont的处理方法

    Vue3+Element Plus使用svg加载iconfont的处理方法

    这篇文章主要介绍了Vue3+Element Plus使用svg加载iconfont的解决方案,本文详细介绍了如何在Element Plus中使用iconfont,简单的说就是要将其封装成SVG,并且支持动态修改颜色,需要的朋友可以参考下
    2022-08-08
  • Vue监听页面刷新和关闭功能

    Vue监听页面刷新和关闭功能

    我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。这篇文章主要介绍了vue监听页面刷新和关闭功能,需要的朋友可以参考下
    2019-06-06
  • 羊了个羊通关脚本Vue node实现版本

    羊了个羊通关脚本Vue node实现版本

    这篇文章主要为大家介绍了羊了个羊通关脚本Vue node实现版本,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 适合前端Vue开发童鞋的跨平台Weex的使用详解

    适合前端Vue开发童鞋的跨平台Weex的使用详解

    这篇文章主要介绍了适合前端Vue开发童鞋的跨平台Weex的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue实现色板功能的示例代码

    Vue实现色板功能的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现色板功能,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-06-06

最新评论