vue插值表达式{{}}渲染了报错undefined

最新推荐文章于 2024-05-10 15:09:07 发布
最新推荐文章于 2024-05-10 15:09:07 发布
阅读量2k 收藏 1
点赞数 2
分类专栏： 踩坑 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010935773/article/details/115216381
版权

错误描述：在获取后端数据成功渲染出数据，打开调试工具发现报错undefined的，如下图
在这里插入图片描述
问题分析：是数据嵌套太深，插值表达式解析需要时间，在解析短时间发现没有这个值，就会报错undefined，在解析到完成发现是有数据的，所以渲染出数据并且报错undefined。
在这里插入图片描述
问题解决：通过减少链式、减少 . 属性，在获取到数据后直接存储到数据中， 如下图

...
// 获取到后台数据后存储数据，避免{{}}渲染的时候减少 .拿到值
this.addNum = res.data.add_num

在这里插入图片描述

朝丫呀
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的基础知识之插值操作
Chil_G的博客
09-08 1632
1、Vue是一个渐进式框架
简单了解vue 插值表达式Mustache
10-15
主要介绍了vue 插值表达式Mustache的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
Vue--HTML标签--插值语法失效
weixin_45406850的博客
11-03 5618
起因：前些天在做练习时被问到的 一般想到的结构 此时运行结果 问题：当使用同样的标签写时会出现插值语法失效 代码如下： 此时的效果： 但是后来我自己实验的时候还换了div标签进行测试，出现以下结果 所以上述的问题并不严谨，就开始了研究(可能当时比较无聊了) 在上网查了资料后发现，好像并没有人写过这样的问题(一般人应该也不会有这样的写代码习惯) 于是我又想到了应该是涉及到了HTML标签的问题，就换了一个方向，开始研究这两个标签的渲染问题 外层标签为h1时 页面渲染如下： 外层标签为div时 页面
vue模板插值失效问题
qq_44381427的博客
05-27 2839
用vue的模板插值，出现修改data值页面不变的问题 <button @click="click">{{btnText}}</button> ... data:{ btnText:'按钮' }, method:{ click:function(){ $('button').ladda().start();//启动特效（瞎写的） } } 由于我使用了ladda按钮特效，导致改变btnText结果页面显示不响应。 猜测原因是，ladda特效修改覆盖了button的一些事件
Vue模板的插值表达式中使用了一个if语句报错
最新发布
weixin_62398022的博客
05-10 425
/ 根据条件变量返回布尔值。message: '这是一个消息' // 这是你想显示的消息。res: false, // 假设这是你的条件变量。语句，但是Vue模板不支持直接在插值表达式中使用控制流语句。3.使用三元运算符(只能作为临时处理的一种方法)1.初步学习vue时候，写了如下代码，遇见报错。原因:尝试在Vue模板的插值表达式中使用了一个。message: '这是一个消息'message: "大家好"(1).使用vue的计算属性。
vue 笔记
weixin_43896538的博客
01-14 452
vue3.0 1、创建应用（项目） 使用cnd引入的方式 <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="hello-vue" class="demo"> {{ message }} </div> <script> co
已解决Vue{{}}插值表达式中多层对象报错undefined未定义。多种可能的情况
qq_59594319的博客
08-13 1132
因为js是异步执行的，插值表达式加载和初始化数据同时进行，当执行到插值表达式的时候可能对象还没有初始化完成。这种情况发生的可能性比较小因为axois请求是异步的，加载插值的时候axios还没有请求完成还没来得及赋值给record。此时读取body为undefined这两种情况的发生都是因为页面在渲染插值表达式的时候里面对应的数据没有完全初始化完毕。
vue {{}} 数据渲染出现 undefined问题
weixin_40425415的博客
11-20 4462
这应该就是数据异步请求导致的问题吧~ 例如 user:{ "id":1, "name":"yrm", "des":{ "sex":"girl" "age":"19" } } {{user.des.sex}} //报错undefined {{user.des ? use...
vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义
weixin_40425415的博客
11-22 1725
问题原因： 出问题的时机很可能就是异步调取接口获取数据和vue的生命周期mounted异步进行，在mounted已经走完，页面DOM节点已经挂载完成时，接口数据却没有第一时间一起返回并渲染，虽然在我们肉眼可观察到的时间内，数据成功渲染到了页面中，但却结结实实地给我们报了一个“属性未定义”的警告。 解决办法： 需要在DOM节点挂载完成时判断初始化的数据是否存在（初始化的数据我们一般会设置为...
Vue插值、表达式、分隔符、指令知识小结
10-17
主要介绍了Vue插值、表达式、分隔符、指令的相关知识，文中给大家提到了去除vue插值表达式{{}}的方法,需要的朋友可以参考下
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello ...
前端vue接口渲染到模板报错解决方案
m0_49714202的博客
11-03 722
前端vue接口渲染到模板报错解决方案
使用vue2.js进行大屏的显示本地可以显示，下发到大屏出现插值错误{θ}数据没有渲染出来 也在使用v-if 在没有数据前不显示但是还是没有渲染出来
m0_64079658的博客
04-24 266
出现插值错误 `{θ}`，可能是因为 Vue 渲染模板时使用的是 ES6的模板字符串，而 `{}`在模板字符串中的含义与 Vue模板语法中的插值语法 `{}`可能冲突，从而导致无法正确解析。3. **转义 `{}` 字符**：如果您仍然想在 ES6的模板字符串中使用 `{}`，可以考虑对其进行转义，例如使用 `\\{\\}` 实现转义。2. **使用 `v-text` 指令**：`v-text` 指令可以帮助您把文本内容渲染到元素中，这样就不需要使用 ES6的模板字符串 了。
在vuex中对数组对象合并或添加属性后,在组件中直接调用渲染报错,数组对象显示{__ob__: Observer},解决方法
weixin_61273407的博客
04-18 697
问题 : vuex中的代码 // 提取选择商品框的数据 simOnSaleList(state) { let onSaleList = state.goodsList.onsale_yds_ls; // for (let i = 0; i < onSaleList.length; i++) { // onSaleList[i].is_stock = ""; // } let res = onSaleList.map(item => { .
Vue-插值表达式渲染多层对象数据
zoukunyang的博客
09-06 1073
后端返回的数据格式嵌套多层对象的时候： obj1: { obj2: { id: 520, name: '江疏影'， sex: '女' } } 使用插值表达式渲染数据： <ul> <li> {{ obj1.obj2.name }} </li> </ul> 此时，obj1.obj2.name 为undefined，页面会报错找不到 name。这是因为页面加载的时候数据还没有渲染出来。解决办法：在父盒子加 v-if 判断。 <ul v-
vue 嵌套多层报错
Shaw_Jie的博客
12-01 249
vue 嵌套多层报错，使用 && 解决
vue实现 前端处理嵌套数据问题
SW_promise的博客
04-06 1916
我们在开发的时候，有时会遇到类似于三级联动的问题，这时候后端传过来的数据类型为数组包含对象，对象再包含数组，数组再包含对象的层级关系，如下图： 我们要实现的效果类似elementUI中的级联选择器 如下图： <template> <div class="hello"> <div class="l div1"> <div v-for="(item , i) in mydata" :class="{mycolor : i == num1}" @click
vue 插值表达式如何使用异步函数
06-02
在Vue中，插值表达式可以使用异步函数，但需要注意一些事项。当使用异步函数时，插值表达式会在异步函数返回结果后更新。以下是一个示例： ```html <template> <div>{{ asyncData }}</div> </template> <script> export default { data() { return { asyncData: '' } }, created() { this.getData() }, methods: { async getData() { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1') const data = await response.json() this.asyncData = data.title } } } </script> ``` 在这个示例中，我们使用了异步函数 `getData` 来获取数据。在 `created` 钩子中调用了 `getData` 函数。`getData` 函数使用了 `fetch` 函数来获取数据，并使用 `await` 关键字等待数据返回。最后，将数据赋值给 `asyncData` 属性，插值表达式 `{{ asyncData }}` 会在异步函数返回结果后更新。 需要注意的是，由于插值表达式是响应式的，因此在更新插值表达式时，Vue会自动重新渲染组件。这可能会导致性能问题，因此应该谨慎使用异步函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值