前端vue接口渲染到模板报错解决方案

最新推荐文章于 2023-09-14 12:00:32 发布

MFG_666

最新推荐文章于 2023-09-14 12:00:32 发布

阅读量728

点赞数 1

分类专栏： vue vue报错信息文章标签： vue.js 前端 javascript 前端模板渲染报错v-if解决 Vue模板渲染报错解决方案

本文链接：https://blog.csdn.net/m0_49714202/article/details/127668477

版权

vue 同时被 2 个专栏收录

124 篇文章 8 订阅

订阅专栏

vue报错信息

3 篇文章 0 订阅

订阅专栏

报错

datetime这个属性没有被找到

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'datetime')"

found in

报错图

在这里插入图片描述

原因

页面进来的时候data 还没数据呢，然后他就会先报错，然后后赋的值

接口如下

图

在这里插入图片描述

代码

{
    "_id": "63631ff983d15e428006f371",
    "deleted_at": null,
    "view_name": "test1",
    "scope": "my_temm",
    "view_type": "all",
    "view_list": [
        "no",
        "name",
        "id"
    ],
    "time": 1667440633,
    "user_id": null,
    "updated_at": {
        "timestamps": 1667440633,
        "datetime": "2022-11-03 09:57:13"
    },
    "created_at": {
        "timestamps": 1667440633,
        "datetime": "2022-11-03 09:57:13"
    },
    "user": null,
    "get_user": null,
    "default": false
}

未修改前

div的渲染写法

<div v-for='(data,index)in List' :key="index">
   <span class="__link">{{ data.item.updated_at.datetime }}</span>
</div>

修改后

主要加判断这个： v-if="data.item.updated_at && data.item.updated_at.datetime"

语法:
1 v-if="data.params && data.params.userId" 拿值前一项&&拿值项,
2 最外层一定要加个div包裹渲染内容才可以

<div v-for="(data,index) in List" :key="index">
	<!-- 渲染外层一定加个div包裹里面的渲染内容-->
    <div v-if="data.item.updated_at && data.item.updated_at.datetime">
            <!-- 原始写法 -->
            <!-- <span class="__link">{{ data.item.updated_at.datetime }}</span> -->
           <!-- 推荐数组方式写法 -->
           <span class="__link">{{data["item"]["updated_at"].datetime}}</span>
    </div>
</div>