在vue较多使用的是axios请求,请求后的回调函数中,this不能指向当前vue实例,打印出来是undefined;
1,let that = this,以前常用的存储this的方法
getSerTime:function(){
let that = this ;//存储this
Vue.axios.get(root + '/api/findInfoDetail').then((response) => {
console.log(response.data);
console.log(this);
console.log(that);
2.使用箭头函数
Vue.axios.get(root +'/api/findInfoDetail',{params:{notid:this.searchData.notId,type:this.searchData.type}}).then((response) => {
console.log(response.data);
console.log(this);
//箭头函数内部的this是词法作用域,是由外层调用者vue来确定,使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了
在vue较多使用的是axios请求,请求后的回调函数中,this不能指向当前vue实例,打印出来是undefined;1,let that = this,以前常用的存储this的方法getSerTime:function(){ let that = this ;//存储this Vue.axios.get(root + '/api/findInfoDetail'...
当vue与axios直接在html文件中使用的时候,位于axios的请求中的this指向并不是指向vue,而是指向window,如果在请求中直接用this获取data中的数据会出现undefined的问题,解决思路是将ES5的函数语法更换为箭头函数即可解决此问题,深层的原因就得深入去了解箭头函数和普通函数之间的区别了!
new Vue({
el: '#app',
data:{
carousels: [],
created() {
axios.get('/a
Vue——axios中this的指向问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在进行Vue实验时,需要用到axios进行接口请求,并将返回的内容传递到Vue的data选项中。正常情况下,会使用this.list = response.data的格式进行赋值,但this的指向恰恰是最容易被忽略的地方。
出现的问题:
在vue中使用axios做网络请求的时候,会遇到this不指向vue,而指向其它地方的情况。如下图所示:
通过在网络上搜索,有很
vue中通过this.refs操作DOM时的注意事项
在
axios请求完成时获取获取绑定的ref 为
undefined
vue中this.$nextTick()函数的
使用
Vue 中的 nextTick 涉及到
Vue 中 DOM 的异步更新
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后
使用 $nextTick,则可以在回调
中获取更新后的DOM
axios({
这篇转载的博客从this is undefined问题入手,详细介绍了问题缘由和各种函数的区别以及使用场景,尤其对于本人在开发vue初踩坑的时候,在axios的正确使用问题上醍醐灌顶。因此转载并且重新排版了一下,原文地址:http://www.javanx.cn/20200814/this-is-undefined/
当我们使用 Vue 在愉快的开发项目的时候,突然报了一个错误:
this is undefined
别担心,不只有你一个人,我也经常遇到这个问题很多次,接下我们一起来看看如何解决这个问题.
Vue中axios中箭头函数的this和function(r)中的this的区别
在methods下的函数this指向的是当前创建的vue实例,而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例,若想拿到后台回传的数据更新data里的数据,不能在回调函数中直接使用this,要用外部函数定义的变量存储的this,也就是当前vue的实例。
使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了,是不是很方便呢?