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 实现可视化拖拽页面编辑器
这篇文章主要介绍了Vue 实现可视化拖拽页面编辑器的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2021-02-02
vue引入Excel表格插件的方法
这篇文章主要为大家详细介绍了vue引入Excel表格插件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
利用vue重构有赞商城的思路以及总结整理
这篇文章主要介绍了利用vue重构有赞商城的思路以及总结整理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
详解vue过度效果与动画transition使用示例
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，Vue 提供了内置的过渡封装组件transition，该组件用于包裹要实现过渡效果的组件
2021-10-10
vue+tsc+noEmit导致打包报TS类型错误问题及解决方法
当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vue+tsc+noEmit导致打包报TS类型错误问题及解决方法,感兴趣的朋友一起看看吧
2023-10-10
Vue实现移动端左右滑动效果的方法
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
2018-11-11
vue + element动态多表头与动态插槽
这篇文章主要介绍了vue + element动态多表头与动态插槽，下面文章围绕vue + element动态多表头与动态插槽的相关资料展开文章的内容，具有一定的参考价值，需要的小伙伴可以参考一下，希望对大家有所帮助
2021-12-12
vant picker+popup 自定义三级联动案例
这篇文章主要介绍了vant picker+popup 自定义三级联动案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue实现类似Spring官网图片滑动效果方法
这篇文章主要介绍了Vue实现类似Spring官网图片滑动效果方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Vue封装--如何将数字转换成万
这篇文章主要介绍了Vue封装--将数字转换成万的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07