如果试图从Vue组件上的箭头函数内部访问 this,将得到一个错误,因为 this 不存在 data() {return{text:'This is a message', }; },methods: {arrowFunction:() =>{console.log(this.text);// ERROR! this is undefined} } 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。
箭头函数使用所谓的词法作用域,简单说就是this指向它所在的上下文。 如果你尝试在 Vue 组件的箭头函数里访问this会报错,因为this不存在! data() { return { text: 'This is a message', }; }, methods: { arrowFunction: () => { console.log(this.text); // ERROR! this is undefined } } 简单粗暴...
当我们在常规函数或简写函数中使用箭头函数时,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。 来个例子: filter方法可以访问this.match,因为箭头函数使用的方法与filteredMessages方法使用的上下文相同。由于此方法是常规函数(而不是箭头函数),因此将其自身的上下文设置为Vue实例。 让我们进一步讨论如何使用axios...
如果试图从Vue组件上的箭头函数内部访问this,将得到一个错误,因为this不存在 代码语言:javascript 复制 data(){return{text:'This is a message',};},methods:{arrowFunction:()=>{console.log(this.text);// ERROR! this is undefined}} 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑...
在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。 解决办法:使用箭头函数 "=>" "=>" 内部的this是词法作用域,由上下文确定(也就是由外层调用者vue来确定)。 methods: { loginAction(formName) { this.$axios.post("……") ...
你的vue应用无法正常工作,你收到的报错是:this is undefined 产生问题的原因是你混合使用了普通函数和箭头函数。我猜你肯定用了一个箭头函数。如果你把这个箭头函数替换成普通函数,也许能解决上面你遇到的问题。 接下来让我们深入原理来了解为什么会产生这个问题。
console.log(this.text);// ERROR! this is undefined} } 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。 有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。 computed: { location:()=>window.location, ...
thisisundefined AI代码助手复制代码 别担心,不只有你一个人,我也经常遇到这个问题很多次,接下我们一起来看看如何解决这个问题。 一个可能的原因是混淆了常规函数和箭头函数的用法,如果你遇到这个问题,我猜你用的是箭头函数。如果用常规函数替换箭头函数,它可能会为你修复这个问题。
首先是事件触发时,回调函数的执行。回调函数不是像这样直接由实例调用:reactIns.ordinaryFunMethod(),而是像上面代码中的,做了一次“代理”,最后被调用时,找不到调用对象了:ordinaryFunWithoutCaller()。这时就出现了this指向undefined的情况。 但为什么使用箭头函数,this又可以正确指向组件实例呢?首先回顾一个简单的知识...
轮询第一次的时候直接执行,一共轮询五次,随后的四次轮询采用setTimeOut三秒一次,可以看到这里实际上使用axios请求的方法是被定义在一个变量为f的匿名函数里,而axios的回调函数使用箭头函数写的。因此里就不能用this了,因为如果在这里用了this,实际上是匿名函数的this,也就是undefined了。所以一般把this是定义为匿名...