VUE项目template中取动态值超过两层会报错解决办法

最新推荐文章于 2024-04-11 18:01:35 发布

短短·

最新推荐文章于 2024-04-11 18:01:35 发布

阅读量777

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45662026/article/details/128136740

版权

问题描述:当我们在写vue项目的时候有时用到的值会x.x.x.这种形式
在这里插入图片描述
从一个对象中获取，超过两个.就报错，如下代码报错

因为获取服务器是异步的，所以 vue 先绑定数据。

所以在初始化时，要把用到的属性赋值为空对象就行了。

绑定数据时，你的wageProject1赋值为空对象的话，而wageProject1里面的 buZhusalaryWage属性便为 undefined，所以报"cannot read property ‘buZhusalaryWage’ of undefined"。

解决办法如下:声明一下要用到的对象

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

短短·

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue中的template标签的使用和在template标签上使用v-for

skysys的研究小屋

01-19

2536

我们知道 .vue 文件的基本结构是： <template> ........ </template> <script> export default { name: "demo" } </script> <style scoped> .demo { font-size: 28px; } </style> 上面template标签，我

vue利用v-for嵌套输出多层对象,分别输出到个表的方法

10-18

今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

vue 动态数据双层循环数据点击事件错位

小哈力----一个小前端工程师

10-23

595

内层循环的key使用id，而不是index。此时的index无法区分开数据。点击id为1 的ItemA 却跳转到id为2的itemB。

vue 深层取值防止报错

shuaiguo0722的博客

07-27

265

vue深层取值报错

vue层级太多页面显示无法更新

风花一世月

12-07

456

this.$set() this.$nextTick(()=>{}) this.$forceUpdate() 降低赋值层级，把数据变成父级/祖先级赋值 v-show v-if 强制刷新

vue 请求嵌套_vue2.0 初始化请求的JSON多层嵌套问题

weixin_39662955的博客

12-20

982

接受的数据可以多层嵌套，但是当你调用的时候可能会出现问题，这不是因为数据本身的问题，是你调用的时机的问题。data () {return {data: '' // 你在data中定义了data}}created () {var self = thisgetJSON(){.....self.data = Data // Data是接受的json数据}}当你的页面中的v-for渲染的时候，c...

两小时从零学会vue-admin-template框架

drhrht的博客

03-06

7229

一、vue-admin-template 1.项目简介官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi

如何让 Vue 项目快速支持 TypeScript 语法?

vv_bug

11-12

1834

简介 JavaScript 作为一种弱类型的语言，类型推断只能提供很有限的支持，TypeScript 提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以验证你的代码可以正常工作，在一些大型的项目中，使用 TypeScript 非常必要，从代码层次就已经避免了很多错误，而且方便文档的书写，最主要的就是后期迭代特别爽，但是对于没有接触过强类型语言（Java、C）的童鞋来说，TypeScript 上手还是有点困难了，单就目前前端发展趋势来说，TypeScript 还是很重要的，想了解更多 TypeScr

基于 Vue3打造前台+中台通用提效解决方案（上）

oschina_41559824的博客

03-04

4495

本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？如果大家对的构建机制有了解的话，那么应该可以发现一个问题。那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在的内容怎么办?是不是就意味着无法解析呢? 是的! 在的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。比如因为

云E办Springboot+vue——前端项目完整版（含源码）

最新发布

weixin_44592407的博客

04-11

538

模板中多添加一个v-if判断条件，即表示如果syncObjForm取不到tableOutput属性，则不加载该div（注意，不能用v-show，v-show的机制是加载后，根据条件判断是否显示）

已解决Vue{{}}插值表达式中多层对象报错undefined未定义。多种可能的情况

qq_59594319的博客

08-13

1560

因为js是异步执行的，插值表达式加载和初始化数据同时进行，当执行到插值表达式的时候可能对象还没有初始化完成。这种情况发生的可能性比较小因为axois请求是异步的，加载插值的时候axios还没有请求完成还没来得及赋值给record。此时读取body为undefined这两种情况的发生都是因为页面在渲染插值表达式的时候里面对应的数据没有完全初始化完毕。

组件显示二级数据时可能容易出现以下报错

qq_30166005的博客

11-12

229

部分代码： <div class="shop-header-discounts" @click="toggleDiscountWin" > <div class="discounts-left"> <div class="activity activity-green"> <span class="content-tag"> <span class="mini-tag">{{info.

vue组件中只能写一个template以及点击动态切换问题

huakaiwuxing的博客

08-23

2055

vue组件中引入另一个组件可以使用import的形式引入以后再用标签的形式进行引入展示；这里用了class的绑定：class={active:shows==1} 并且这里的class绑定的形式为对象类型，对象类型中的isA，isB是布尔类型值 class的绑定有三种形式 1）:class='xxx' 2）表达式是字符串:'classA' 3)表达式是对象：{cl...

vue中元素层级太深的解决方案

weixin_41492957的博客

06-06

1955

vue层级过深数据处理不生效的解决方案

Vue中使用v-for实现一对多数据的2层和3层嵌套循环

BADAO_LIUMANG_QIZHI的博客

08-18

7505

场景业务场景中常有一对多的情况。后端在给前端返回数据时是一个对象的list，为每个对象的有一个属性是多的那个的对象的list。比如后台给前端返回的数据示例如下那么在Vue中怎样将这个一对多的数据循环都显示出来。注：博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现实现两层循环嵌套 <div v-for="(item,index) i...

vue中取不到ref的值

团长的博客

02-21

3413

在Vue中，如果ref标记的元素是放在v-for之内的，在获取其对象时，是以数组形式返回的！比如：此处我循环几个form表单，动态赋值不同的ref名，且每个ref名都是唯一的。然后在获取对应的ref名的对象时，因为被v-for包围，虽然ref名是唯一的，vue还是把它装在一个数组中返回，所以正确获取时要取this.$refs数组第一项[0]。打debugger可以看到许多过程之中的有趣现象。~~~ ...

vue中的computed计算属性，报错Computed property “xxx“ was assigned to but it has no setter

m0_45237165的博客

01-06

6200

vue中的computed计算属性模板内可以是变量，可以是变量的逻辑表达式，也可以是方法。 {{ message }} {{ message.split('').reverse().join('') }} {{ messageFunction }} 以上均可，模板内尽量使用简洁的声明变量，这些复杂的表达式或者方法会使模板很重难以维护，这个时候需要用到计算属性既然说计算属性和方法都能渲染，那区别是什么呢？计算属性基于它们的响应式依赖进行缓存的，即变量发生变化以后才会执行计算函数，如果变量没有发生变化则

vue如何拿取嵌套对象

08-07

### 回答1：您好，关于如何获取嵌套对象，可以使用Vue的计算属性来实现。假设我们有一个嵌套的对象person，其中包含了name和age属性，而name属性又包含了first和last属性，我们可以这样获取： ``` <template> <div> <p>{{ fullName }}</p> <p>{{ age }}</p> </div> </template> <script> export default { data() { return { person: { name: { first: 'John', last: 'Doe' }, age: 30 } } }, computed: { fullName() { return this.person.name.first + ' ' + this.person.name.last }, age() { return this.person.age } } } </script> ``` 在上面的代码中，我们定义了一个计算属性fullName来获取person对象中的嵌套属性name的first和last属性，最后将它们拼接起来作为fullName的值。同时，我们也定义了一个计算属性age来获取person对象中的age属性。通过使用计算属性，我们可以方便地获取嵌套对象的属性值，而不必担心嵌套层数的限制。 ### 回答2：在Vue中，可以使用点语法和方括号语法来访问和获取嵌套对象。 1. 使用点语法：假设有一个嵌套的对象`data`，其中包含一个`user`对象，该对象又包含一个`name`属性。我们可以使用以下语法来获得`user`对象中的`name`属性： ```javascript data.user.name ``` 这将返回`name`属性的值。 2. 使用方括号语法：如果对象的属性名包含特殊字符或数字，或者你想使用变量来访问对象的属性，可以使用方括号语法。例如，我们有一个`data`对象，里面有一个`user`对象，该对象中有一个由用户输入的变量`prop`作为属性名。我们可以使用以下语法来获取该属性的值： ```javascript data.user[prop] ``` 其中`prop`是一个变量，它存储了要访问的属性名。这将返回该属性的值。通过这两种方式，我们可以在Vue中轻松地获取和操作嵌套对象的属性值。无论是通过点语法还是方括号语法，都可以在Vue的模板和JavaScript代码中使用。 ### 回答3：在Vue中，可以使用点号（.）和方括号（[]）来访问嵌套对象的属性。使用点号可以直接通过对象的属性名来获取嵌套对象的属性。例如，如果有一个名为obj的对象，其中包含一个名为nestedObj的嵌套对象，可以通过`obj.nestedObj`来获取嵌套对象。使用方括号的方式是通过字符串来访问嵌套对象的属性。例如，如果有一个名为obj的对象，其中包含一个名为nestedObj的嵌套对象，同样可以通过`obj['nestedObj']`来获取嵌套对象。如果嵌套对象有多层，可以使用多个点号或方括号来进行访问。例如，如果nestedObj对象还包含一个名为innerObj的嵌套对象，可以通过`obj.nestedObj.innerObj`或`obj['nestedObj']['innerObj']`来获取嵌套对象属性。在Vue中，还可以通过计算属性或方法来获取嵌套对象属性。通过在Vue实例的计算属性或方法中，使用点号或方括号来获取嵌套对象属性，然后在模板中引用该计算属性或方法来展示视图。需要注意的是，在访问嵌套对象属性时，要确保每一层的对象都存在，否则可能会报错。可以使用`v-if`指令来判断对象是否存在，然后再进行属性访问，以避免错误。综上所述，Vue中可以使用点号和方括号的方式来获取嵌套对象的属性，可以直接访问或通过计算属性、方法进行访问，并使用`v-if`指令来进行对象存在的判断。

VUE项目template中取动态值 超过两层会报错 解决办法

解决办法如下:声明一下要用到的对象

VUE项目template中取动态值超过两层会报错解决办法