vue在取对象长度length时候出现undefined的解决

 更新时间:2022年06月02日 15:00:31   作者:圆内~搁浅  
这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

取对象长度length时候出现undefined

代码

data为一个对象

var key=Object.keys(datas)
var value=Object.values(datas)

使用Object.keys转化一下,

再取长度

var keyslength=key.length

就能顺利出对象长度啦!!!

vue2.0踩坑实况- length undefined??

在最近的一个vue案例里出现了这个问题。

后台通过mock数据传递seller.support的数组数据,想通过计算length来显示个数。 

<div class="supports-count">
      <span class="count">{{seller.supports.length}}个</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>

虽然界面可以显示length数据,但是控制台肥肠傲娇一直报错。大概是说找不到一个undefined的length

你丫这不是找到了么0.0

花了点时间研究下官方文档才知道,vue的数据绑定在刚开始只是和内存建立联系,并没有真正的和后台的数据挂上钩,所以一开始的seller.supports只是一个空值,必须在之前加上v-if,确保有值以后再开始计算length

  <div class="supports-count" v-if="seller.supports">
      <span class="count">{{seller.supports.length}}个</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue访问未定义的路由时重定向404问题

    vue访问未定义的路由时重定向404问题

    这篇文章主要介绍了vue访问未定义的路由时重定向404问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 浅析Vue.js 中的条件渲染指令

    浅析Vue.js 中的条件渲染指令

    这篇文章主要介绍了Vue.js 中的条件渲染指令,Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,感兴趣的朋友一起看看
    2018-05-05
  • Vue全局变量的定义及使用方法

    Vue全局变量的定义及使用方法

    这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vuejs第十二篇之动态组件全面解析

    Vuejs第十二篇之动态组件全面解析

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。接下来通过本文给大家介绍Vuejs第十二篇之动态组件,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • vue之bus总线简单使用讲解

    vue之bus总线简单使用讲解

    这篇文章主要介绍了vue之bus总线简单使用讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • ElementUI+命名视图实现复杂顶部和左侧导航栏

    ElementUI+命名视图实现复杂顶部和左侧导航栏

    本文主要介绍了ElementUI+命名视图实现复杂顶部和左侧导航栏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    这篇文章主要介绍了vue 解决uglifyjs-webpack-plugin打包出现报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue基于vant实现上拉加载下拉刷新的示例代码

    vue基于vant实现上拉加载下拉刷新的示例代码

    普遍存在于各种app中的上拉加载下拉刷新功能,本文主要介绍了vue基于vant实现上拉加载下拉刷新,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 基于vue实现多功能树形结构组件的示例代码

    基于vue实现多功能树形结构组件的示例代码

    一个优雅展示树形结构数据的 Vue 组件,递归渲染每个节点及其子节点,支持自定义颜色、文本和布局,通过独特的样式巧妙处理不同层级,为用户打造丰富的视觉盛宴,文中通过代码给大家介绍的非常详细,感兴趣的同学可以自己动手尝试一下
    2024-02-02

最新评论