vue 数据(data)赋值问题

摘要:
总结我遇到的一个长期纠结的问题。在项目中,我们需要使用背景数据来渲染前端。我们使用vue集成的axios,在安装页面组件后使用vue中的hook函数向后台发送get请求,然后将返回的数据分配给data()中定义的属性:执行后,前端报告错误:请求成功执行后,回调函数中的内容被执行。回调函数位于其他函数内部。它不绑定到任何对象,未定义。解决方案:

总结一下我遇到的一个纠结很久的问题。

在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性:

vue 数据(data)赋值问题第1张

执行后前端报错:

vue 数据(data)赋值问题第2张

原因:

在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined。

解决方案:

一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性

vue 数据(data)赋值问题第3张

二)使用箭头函数

vue 数据(data)赋值问题第4张

免责声明:文章转载自《vue 数据(data)赋值问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇windows下安装rabbitMQ教程(实战可用)【STM32F429】第1章 选择RTX5的优势下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

zookeeper + kafka集群安装部署文档

  部署环境 服务 所属ip和占用的端口 zookeeper 192.169.1.71:2181 kafka1 192.169.1.71:9092 kafka2 192.169.1.70:9092 kafka3 192.169.1.21:9092   搭建zookeeper + kafka前需要安装jdk,jdk需1.8及以上 一、...

html5实现web app摇一摇换歌

微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的app实现也有相关接口,这里只考虑web app的情况...... Section One 先来看下demo效果图: 测试地址:http://hcy2367...

爬虫实战(三) 用Python爬取拉勾网

目录 0、前言 1、初始化 (1)准备全局变量 (2)启动浏览器 (3)打开起始 URL (4)设置 cookie (5)初始化部分完整代码 2、爬取数据 (1)爬取网页数据 (2)进行翻页操作 (3)爬取数据部分完整代码 3、保存数据 4、数据可视化 5、大功告成 (1)完整代码 (2)运行过程 (3)运行结果 0、前言 最...

NIO:Buffer 详解

如你所见,在NIO中,数据的读写操作始终是与缓冲区相关联的。Channel将数据读入缓冲区,然后我们又从缓冲区访问数据。写数据时,首先将要发送的数据按顺序填入缓冲区。基本上,缓冲区只是一个列表,它的所有元素都是基本数据类型(通常为字节型)。缓冲区是定长的,它不像一些类那样可以扩展容量(例如,List,StringBuffer等)。注意,ByteBuffe...

js数组删除(splice和delete)

最近一直在写js的数组,然后就发现了很奇怪的问题,后来才发现了规律。 删除数据的一行,一般有两种方法,一个是splice,一个是delete; splice:删除了数组后,数组的长度会自动变化。用法:arr.splice(2,1)——2是数组的下标值,1 代表输出一行数据。 delete: 删除了数组后,数组的长度不会变化。 用法:delete arr[2...

Web上传文件

  客户端      相对于FTP文件上传,Web文件上传速度慢一些,但使用方便,不需要客户端,而且权限比FTP容易控制。 Web文件上传采用POST方式,上传文件需要设置FORM的entype属性为multipart/form-data。由于上传的文件会比较大,需要设置该参数指定浏览器使用二进制上传。否则enctype属性默认为application/x...