学vue初次遇到this指向问题

最新推荐文章于 2022-08-02 17:33:51 发布
最新推荐文章于 2022-08-02 17:33:51 发布
阅读量441 收藏 4
点赞数
文章标签： axios this指向
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43664969/article/details/101275066
版权

学vue初次遇到this指向问题

在学axios获取后端数据时，遇到了this指向问题，记录一下怎么解决的吧

解决前的代码

在这里插入图片描述
在这里插入图片描述
界面效果：
在这里插入图片描述
原来我是想着通过点击getdata按钮，获取后端数据并储存到 hello 变量中，但是运行时报错：在这里插入图片描述
原因是这里的this指向的是axios中function（da）,不是指向当前页面的vue实例，所以无法获取vue实例data中定义的 hello变量

如何解决

1.通过再axios外面将this记录一下，存入变量a，用a.hello访问hello变量
在这里插入图片描述
2.将function函数改变为箭头函数，箭头函数没有自己的this，会使用外层的this
在这里插入图片描述
通过这两种方法，然后点击获取数据，都有成功改变 hello变量了在这里插入图片描述
学习前端没多久，也是第一次写博客，有问题欢迎大佬能指正

默默無聞的唸
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中this的指向问题
Rhine
01-07 2万+
最近一直在做毕业设计，学习了Vue用来写了很多的前端代码，不得不说js对我这个“Java前端程序员”有些太不友好，时不时都能遇到一些坑，this就是其中之一。
vue中的this指向问题
weixin_30823833的博客
05-21 104
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> ...
Vue中this指向问题及为何this.***能直接获取设置状态
weixin_42192113的博客
07-22 271
1. Vue中this指向问题 如果是通过this访问data或者methods中的数据及方法，this指向Vue的实例 2. Vue 中为何this.***可以直接访问data中的数据状态 如第一问所说，这样this的指向都是指向Vue实例，那this.*** 是如何访问到data中的数据状态的。这得从源码分析起，如下： function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this in
Vue中this的指向问题，this指不到Vue原型的解决方法
热门推荐
我的代码没有Bug的博客
12-25 1万+
在Vue中通常会用this去调用绑定在Vue原型上的方法。 解决方法 一 加粗样式 我在函数体内写了一个this.router.push(′/index′)方法，其主要目的是为了在验证完成后进行路由跳转，跳转到index页面。当运行过后会报个错。![在这里插入图片描述](https://img−blog.csdnimg.cn/201812251620106.png)其报错原因是因为在函数内部th...
关于vue使用时this指向的问题,以及this指向的各种情况
tianjian_zhou的博客
09-17 5964
工作中经常会用到let _this = this;为什么要这么写呢？于是我决定在空闲时间一查究竟： this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文 在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter & setter等都适用）；构造函数...
vue的this指向详解
m0_52669454的博客
08-02 3136
vue的this指向详解
初次学习Vue遇到的问题
08-31
初次学习Vue遇到的问题
详解vue中的computed的this指向问题
10-17
主要介绍了详解vue中的computed的this指向问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue使用axios时关于this的指向问题详解
11-27
前言 众所周知axios是vue-resource后出现的Vue请求数据的插件...在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined，可以使用箭头函数”=>”来解决。如下： methods: { loginAction(formName) {
vue开发中遇到的问题总结
10-15
在Vue.js开发过程中，开发者经常会遇到各种挑战和问题。本文将总结一些常见的Vue开发问题及其解决方案，帮助读者理解和解决这些问题。 ### 1. 子组件修改父组件的prop 问题描述：Vue警告提示"Avoid mutating a ...
vue watch使用了immediate之后，handler的this指向问题
Cooky的博客
10-30 2647
watch使用了immediate之后，handler的this指向问题？？ 这里的handler方法不能使用箭头函数，改成传统function就可以了 list: { handler: function (newList, oldList) { this.handleListData(newList, oldList) }, dee...
vue开发中在页面代码中一律不能使用this
Efficiency9的博客
06-07 4185
<div @click='this.limitNum=this.address.length'></div>以上代码是错误的，因为当前代码的作用域就已经是this了 正确写法<div @click='limitNum=address.length'></div>
Vue中this指向的问题
诗酒趁年华
05-09 6842
在下面的例子中可以看出，普通函数的this指向的就是Vue的实例，this.message可以获取到data中的值， 而箭头函数的this指向了window，不能获取到值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume...
Vue.js访问类内变量时要用this
swq404的博客
07-26 1245
前言 以下是Vue.js类的完整代码： new Vue({ el: '#page', data() { return { apipath: "http://bzc.xyz/", posts: null, }; }, //页面加载完成后运行 mounted() { axios .get(this.apipath + 'getposts.php') .then(response => (
关于vue中this的指向问题
兜兜的博客
09-22 510
vue中this的指向问题以及具体实例展示。
vue中怎么实现获取当前点击对象this
weixin_30872867的博客
02-27 2515
应用场景 在评论列表中，有很多条评论（通过循环出来的评论列表），评论的文字有多跟少，默认展示2行超出显示点击查看更多，，要点击查看更多对当前的这条评论进行全部评论展示！ 问题描述 要是在传统的点击事件中，我们可以获取当前点击事件的this来执行相应的操作，但是在vue中没有这个点击this事件！ 解决问题 在vue中我们要通过组件的方式来实现对当前元素进去切换 父组件 <v...
ubuntu20.04安装教程.docx
07-09
安装 Ubuntu 20.04（Focal Fossa）的步骤如下所示。确保在开始安装之前备份重要数据，以防万一。 1. 下载 Ubuntu 20.04 镜像文件 访问 Ubuntu 官网（https://ubuntu.com/download/desktop）下载 Ubuntu 20.04 的镜像文件。根据你的计算机架构选择合适的版本（通常是 64 位的）。 2. 制作启动盘 你可以使用以下两种方法制作 Ubuntu 的启动盘： 使用 Rufus 制作启动盘（适用于 Windows）： 下载并安装 Rufus。 插入空白 USB 驱动器。 打开 Rufus，选择你下载的 Ubuntu 镜像文件。 点击 "开始" 制作启动盘。 使用 Etcher 制作启动盘（跨平台）： 下载并安装 Etcher。 打开 Etcher，选择 Ubuntu 镜像文件和你的 USB 驱动器。 点击 "Flash!" 制作启动盘。 3. 安装 Ubuntu 20.04 制作完成后，将 USB 启动盘插入到需要安装 Ubuntu 的计算机上，然后按照以下步骤进行安装： 启动计算机：在 BIOS 设置
贵阳市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
学校安全责任追究制度.docx
07-09
学校安全责任追究制度
vue中函数this指向问题
06-03
在 Vue 中，函数中的 this 关键字默认指向当前组件实例。但是，当函数被作为回调函数传递时，this 的指向可能会发生变化。为了解决这个问题，可以使用箭头函数或者在函数内部使用 bind 方法来绑定 this 的值。例如：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值