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

报错

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>

添加上后就不报错了,简直开心到爆炸啦~~~

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！