首页 > 其他分享 > 控制台报错:[Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'l

控制台报错:[Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'l

时间:2023-04-28 10:45:31浏览次数:37  
标签:Vue render res list length 报错 null data

可能原因

在调取接口获取返回值时,由于各种原因(参数错误、返回格式不规范等),导致接收返回时数据类型与初始值不同。

data () {
    return {
        list: [] //原本是个数组对象
    }
},
methods: {
    getList() {
     let params = {} apiRequest(params).then(res => { this.list = res.data //此时返回的为null    this.total = res.data.length }) }, }

解决办法

在处理返回值时加上判断

if(res.data) {
    this.list = res.data
    this.total = res.data.length
}

 

标签:Vue,render,res,list,length,报错,null,data
From: https://www.cnblogs.com/nicoz/p/17361241.html

相关文章

  • Hadoop启动集群报错:Starting namenodes on [hadoop01] hadoop01: root@hadoop01: Per
    搭建三个hadoop集群的时候,master没有启动namenode和datanode,报错:Startingnamenodeson[hadoop01]hadoop01:root@hadoop01:Permissiondenied(publickey,gssapi-keyex,gssapi-with-mic,password).Startingdatanodeshadoop01:root@hadoop01:Permissiondenied(publicke......
  • Vue的生命周期的详解
    Vue的生命周期   Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。  Vue的生命周期就是vue实例从创建到销毁的全过程,也就是newVue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom-......
  • Vue3实现组件级基类的几种方法
    Vue3的组件有三种代码组织方式纯OptionAPI(不含setup)optionAPI+setup纯setup(即compositionAPI)对于这三种形式,设置基类的方法也略有不同。使用mixins、extendsvue3提供了mixins和extends,但是尝试之后发现这两种方法只支持纯OptionAPI,设置的data会被识别,但是设置的......
  • Vue3路由正确写法
    import{createRouter,createWebHistory}from'vue-router'importHomefrom'@/view/Home.vue';importLoginfrom'@/view/Login.vue'constroutes=[{path:'/',component:Home},{path:'/login',......
  • vue2源码-十六、异步组件
    异步组件Vue中异步组件的写法有很多,主要用作大的组件异步加载的markdown组件editor组件。就是先渲染一个注释标签,等组件加载完毕,最后再重新渲染forceUpdate(图片懒加载)使用异步组件会配合webpack原理:异步组件默认不会调用Vue.extend()方法所有Ctor上没有cid属性,没有cid属......
  • Vue2实现部分页面使用rem布局
    1.计算rem值的比例,这里是1920的设计图;setRem(){/***@file:index.vue*@method:setRemPc*@param:*@return:*@description:计算rem大小*@date:*/varwhdef=100/1920;//表示1920的设计图,使用100PX的默认值varbodyWidth=document.body.cli......
  • PHP8编译安装报错make: *** [ext/fileinfo/libmagic/apprentice.lo] Error 1
    make:***[ext/fileinfo/libmagic/apprentice.lo]错误1 解决:当配置PHP时出现make:***[ext/fileinfo/libmagic/apprentice.lo]Error1时是因为服务器内存不足1G只需要在配置命令中添加--disable-fileinfo即可......
  • vue3 ts 项目文件夹解析
    vue3ts项目文件夹解析layouts文件夹通常用于存放应用程序中的布局组件或布局相关的文件。布局组件是用于包装应用程序中的页面内容的组件,通常包含头部导航、侧边栏、页脚、页面标题等等。布局组件可以在不同的页面中共享,并且可以为应用程序带来一致的外观和体验。core存放......
  • vue2实现饼图Pie组件封装
    实现如下效果: 如果不会请移步到官网的栗子,请点击查看直接给大家上代码:整体代码片段1<template>2<divref="echarts"style="width:100%;height:300px;"></div>3</template>4<script>5/*eslint-disable*/6import{setPieOpt......
  • Vue 根据父组件的不同动态显示子组件
    一、问题描述两个同级组件公用一个子组件,需要根据不同的组件,动态显示子组件的内容,比如A需要这么多的Radio,但是B不需要二、解决思路父组件向子组件传值,子组件根据传入的内容进行判断三、代码//父组件引入子组件通过自定义名称传入父组件的值<statusChange:isShowRadio=......