vue数据渲染时拿不到值报错

最新推荐文章于 2023-06-04 23:48:00 发布
最新推荐文章于 2023-06-04 23:48:00 发布
阅读量2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MittyLee/article/details/106793164
版权

{{dataAll.first.name}}

 

使用{{}}双花括号在html页面进行数据绑定时，从一个对象中获取，超过两个.就报错，如下代码报错提示为

 

获取数据是异步进行，vue先执行绑定的数据，但此时赋值为空，直接拿两层是拿不到数据的。

 

解决办法：在data：里给first一个赋值为空，这样初始化时不会报错

 data: {
        dataAll : {
            first : {},
            }
        },

MittyLee
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue.js 数据渲染成功仍报错的问题
10-18
在开发Vue.js应用时，有时会遇到数据已经正确渲染到页面上，但仍然收到错误提示的情况。这种情况通常与数据绑定和生命周期有关。本文将详细解释这个问题及其解决方案。 首先，问题出现在数据结构为一级对象嵌套二级...
解决vue 项目引入字体图标报错、不显示等问题
10-18
如果报错信息提示找不到字体文件，解决方法是将字体的引入路径更改为绝对路径。确保字体文件的URL能够被正确解析，避免相对路径可能导致的找不到文件的错误。在项目中，可以通过修改import语句或调整CSS中的@font-...
vue获取到数据，读取对象的属性无法读取报错
lllnana
02-24 1875
vue发送axios请求获取到数据，读取对象的属性，绑定在页面时，无法读取报错
vue data有值，但是页面{{}} 取不到值
最新发布
Feixiangdechenyu的博客
06-04 997
我的问题出在js引入的顺序不对，导致不能正常显示vue中的值 正确的顺序应该是：先引入vue的js--------html代码-----最后引入自己写的js <html> <head> <title></title> <script src="../js/vue.js"></script> </head> <body> <div id="app"
vue {{}} 不显示 data 里的数据
我是张先生
12-12 5243
在结合 vue 和 axios 接受后端数据返回到前端 数据 使用 模板语法 不生效 后来使用 v-html 就可以了
首次加载页面子组件获取不到vuex里的值或者sessionStorage里的值
agua001的博客
10-21 5187
很正常的一个需求： 页面首次打开到首页，在首页做是否登录的判断，如果存在cookie则自动登录，然后把token,status…等一些值存储到vuex中，首页头部我封装成组件了，然后头部里的一些内容展示是根据vuex里的值或者sessionStorage里的值去判断的。如图： 其实在里面还有一些内容的 html: <div class="userCenter_top"> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583
vue中读取对象中对象的属性无法读取报错
weixin_44723016的博客
10-27 3834
vue中读取对象中对象的属性无法读取报错，提供一下两种解决方式。
vue页面渲染没有问题，但是有报错的解决办法
caimaomaocai的博客
06-13 1194
解决vue在发请求后渲染页面，页面刚开始没有数据的情况
qq_53458653的博客
09-09 2393
vue渲染数据
vue中渲染对象中属性时显示未定义的解决
10-15
总的来说，Vue在渲染和操作数据时，要求数据必须存在于Vue实例的`data`、`props`或`computed`选项中，且结构清晰。对于深层次的数据结构，我们需要提前定义，或者在适当的时候将数据注入到正确的对象层级。对于绑定...
vue data有值,但是页面{{}} 取不到值的解决
01-22
我的问题出在js引入的顺序不对，导致不能正常显示vue中的值 正确的顺序应该是： 先引入vue的js——–html代码—–最后引入自己写的js 补充知识：vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题 父子组件通信 这个很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可 。 例如：在父组件中 [removed] data(){ return { Data: [10,20,30] }
解决vue 子组件修改父组件传来的props值报错问题
12-13
然而，Vue强烈建议不要直接在子组件内部修改这些props的值，因为这可能会导致数据流的混乱和不可预测的行为。当尝试直接修改props时，Vue会发出警告，如题目描述中的`[Vue warn]: Avoid mutating a prop directly......
vue如何解决循环引用组件报错的问题
10-17
这里，`selFile` 是一个返回Promise的函数，Vue会在渲染到该组件时异步加载它。 **最佳实践** 为了避免循环引用问题，可以考虑以下最佳实践： - 设计组件结构时，尽量减少组件间的依赖，尤其是深度依赖。 - 使用...
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
报错通常是因为在Vue实例渲染完成之前尝试访问`this.$refs`。由于Vue的异步更新队列机制，DOM的更新可能滞后于JavaScript代码的执行。当组件或元素还在渲染过程中，尝试访问`this.$refs`会得到`undefined`，因为...
vue开发中，数据还没获取，页面已经渲染，导致页面没有数据
热门推荐
weixin_48677331的博客
12-28 2万+
在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。 如何解决？ 使用 v-if 根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。 上代码 <h4 v-if="isShow">{{ data }}</h4>
vue return html报错,解决vue.js 数据渲染成功仍报错的问题
weixin_35752122的博客
07-03 984
最近在做一个vue项目，用的是官方推荐的axios请求数据，数据结构是一级对象嵌套二级对象，发现一级对象数据渲染不报错，二级数据渲染报错。很是郁闷！data函数如下export default {name: 'hello',data() {return {card:{}}}}返回的数据如下：{"object":{"subObject":"123",...}}报错的原因是在data函数return的...
VUE 页面渲染成功，但control中报错
06-06 1014
这个问题一般是json数据是由后台请求提供，但在页面加载的时候，还没有这个对象。解决办法有几个，各有优缺点：1.一般在mounted方法中获取数据的，采用同步，等数据拿到后，再加载页面，可以防止报错，页面出现脚本{{XXX}}等。缺点是：数据大会影响页面加载的速度。2.一般报错都是对data项，动态新增属性，可以这样定义，如下图，防止出现undefined.属性的情况出现，就不会报错了。缺点是：每...
Vue3.0常见报错解决整理
清风明月的博客
02-02 2227
1.报错：This dependency was not found: vue-router in ./src/router/Index.js 原因：vue-router 没有安装 运行：npm install --save vue-router 2.报错：Failed to resolve loader: less-loader You may need to install it. 或者Syntax Error: Error: Cannot find module ‘less’ 原因：less-
vue2使用setcontent渲染富文本数据报错(reading 'setcontent')
06-03
根据你提供的信息，我猜测你是在使用 Vue2 和一个富文本编辑器，可能是 Quill 等。在 Vue2 中，你需要使用 `v-html` 指令来渲染富文本数据，而不是 `setcontent` 方法。可以在组件的模板中使用 `v-html`，并将富文本数据绑定到一个变量上，例如： ```html <template> <div v-html="richText"></div> </template> <script> export default { data() { return { richText: "<p>这是富文本数据</p>" }; } } </script> ``` 如果你仍然想使用 `setcontent` 方法，你需要在组件的生命周期函数中等待富文本编辑器初始化完成，然后再调用 `setcontent` 方法。例如： ```html <template> <div ref="editor"></div> </template> <script> import Quill from 'quill'; export default { mounted() { const editor = new Quill(this.$refs.editor, { // 配置项 }); editor.on('ready', () => { editor.setContents(this.richText); }); }, data() { return { richText: { ops: [ { insert: '这是富文本数据\n' } ] } }; } } </script> ``` 在这个例子中，我们使用了 Quill 富文本编辑器，并在组件的 `mounted` 生命周期函数中初始化了编辑器，并等待编辑器的 `ready` 事件。当编辑器准备好之后，我们调用 `setContents` 方法来设置富文本数据。注意，这里的富文本数据需要符合 Quill 的数据格式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值