前端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>

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

最后

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

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

前端vue项目执行npm install 报错cd() never called()
前端我刚开始接触Vue,从GitHub上下载了代码程序,但缺少一些插件,用vscode打开并下载插件执行报错cd() never called! 解决的方式 1.执行cmd命令行不要再vscode里执 ...
vue语法、跨域报错等问题集合
前言记录vue报错问题,不断更新! 一.Eslint报错 1.加入如下注解:/* eslint-disable */ 2.编译器搜索eslint 选择 disable 3.注释package.jso ...
@vue/cli 3 运行支持报错 socket
问题 /sockjs-node/info 无限报错解决方案原因是相关代理端不支持 ws,因此需要在代理处关闭 ws,即 ws: false ,如下: vue.config.js const ds_ ...
vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白报错信息此时页面一片空白报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
vue 检测ie版本_分析vue 兼容IE报错解决方案
这篇文章主要为大家详细介绍了分析vue 兼容IE报错解决方案,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! IE 页面空白报错信息 [图片暂缺 ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
IDEA中实现接口时注解@Override报错的解决方法
IDEA中实现接口时注解@Override报错的解决方法参考文章: (1)IDEA中实现接口时注解@Override报错的解决方法 (2)https://www.cnblogs.com/liulao ...
Vue工程报错解决方案Warn:import Vue from “vue“；
Vue工程报错解决方案Warn:import Vue from "vue"; 参考文章: (1)Vue工程报错解决方案Warn:import Vue from "vue& ...
vue 兼容IE报错解决方案
vue 兼容IE报错解决方案参考文章: (1)vue 兼容IE报错解决方案 (2)https://www.cnblogs.com/candymanping/p/10195377.html 备忘一下.

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

目录

报错

报错图

原因

接口如下

图

代码

未修改前

修改后

最后

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

最新文章

热门文章