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

目录
  • 数据对象length属性未定义
    • 问题
    • 解决
  • vue2.x中数组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>

结果

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

赞 (0)

相关推荐

  • Vue不能观察到数组length的变化

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断. 为什么Vue不能观察到数组length的变化 如下代码,虽然看

  • vue中渲染对象中属性时显示未定义的解决

    后端给的对象结构是这样的,三层嵌套 而在最开始的时候我在data中定义了一个对象(dataInfo)接受了图示所有的属性 而在template中我要渲染数据(dataInfo.clientInfo.deviceName) 然后....在这里插入图片描述 未定义...作为一个前端菜鸡,百思不得其解. 最终在有道的帮助下,告诉我了此属性不在vue实例上 恍然大悟 只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的 两种解决方法: 第一: 在定义

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

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

    目录 取对象长度length时候出现undefined vue2.0踩坑实况- 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数据对象length属性未定义问题

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

    目录 数据对象length属性未定义 问题 解决 vue2.x中数组length属性报错 原因 解决方案 数据对象length属性未定义 问题 通过axios得到接口数据,但发现该数据length属性在打印的时候undefined. this.axios.get("/xxx/xxx/xxx/xxxx/process/status?docId=" + this.docId).then((response) => {   if (response.data.code === 0) {

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • vue给对象添加属性没有响应式的问题及解决

    目录 vue给对象添加属性没有响应式 给已创建的vue添加响应式属性 怎么才能添加响应式的属性呢? 总结 vue给对象添加属性没有响应式 vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法. 但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题. 在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加

  • WScript.Shell对象SpecialFolders属性未公开文档分享

    特殊文件夹名称用于索引该集合以检索所需的特殊文件夹,文档中列出了下面的特殊文件夹: AllUsersDesktop AllUsersStartMenu AllUsersPrograms AllUsersStartup Desktop Favorites Fonts MyDocuments NetHood PrintHood Programs Recent SendTo StartMenu Startup Templates 不过今天在用OllyDbg调试VBS的时候,发现文档中少写了一个AppD

  • vue data对象重新赋值无效(未更改)的解决方式

    vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效 这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r

  • Vue监听数据对象变化源码

    监听数据对象变化,最容易想到的是建立一个需要监视对象的表,定时扫描其值,有变化,则执行相应操作,不过这种实现方式,性能是个问题,如果需要监视的数据量大的话,每扫描一次全部的对象,需要的时间很长.当然,有些框架是采用的这种方式,不过他们用非常巧妙的算法提升性能,这不在我们的讨论范围之类. Vue 中数据对象的监视,是通过设置 ES5 的新特性(ES7 都快出来了,ES5 的东西倒也真称不得新)Object.defineProperty() 中的 set.get 来实现的. 目标 与官方文档第一个例

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • vue 绑定对象,数组之数据无法动态渲染案例详解

    vue 绑定对象,数组之数据无法动态渲染案例详解

    项目场景: 黑马vue项目管理实战,获取商品分类,展开栏的标签页中修改修改数据属性 问题描述: 在本该点击+new tag这个标签页时弹出一个input框让用户输入需要添加的属性 结果点击时却不能立马渲染 async getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = await this.$http.get( `categorie

  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象.Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数 <div id="app"> {{ message }} </div> <script&

随机推荐