let self = this //使用新變量替換this，以免this無效

//updateStudentInfoToServer是一個將本身部分數據異步上傳的接口，接收三個參數，其中第一個是數據，第二、三個是函數，第二、三個函數使用function(){}形式書寫

updateStudentInfoToServer:function(data, networkOk, networkError){ let postData = this.$qs.stringify({ data:data }) this.axios.post(’/api/update/updateStudentInfo’, postData ).then(res=>{ console.log(’ return : ’) console.log(res) networkOk(res) //網絡成功的回調 }).catch(error=>{ console.log(error) networkError(error) //網絡失敗的回調 }) console.log(’axios done’)}, this.updateStudentInfoToServer(data, function(res){ console.log(’return ok’) console.log(res) // console.log(’self’) // console.log(self) //就是this // console.log(’this’) // console.log(this) //undefined self.handleCancelEdit() },function(error){ console.log(error) } )

提交網絡數據是異步調用，所以會先返回然后才執行成功、失敗的回調。

這種書寫方式，function的作用于決定了function的代碼塊內使用this無法改變、獲取vue data中設置的變量

使用es6的箭頭語法可以實現this的隨處調用

this.updateStudentInfoToServer(this, res=>{ console.log(’return ok’) console.log(res) console.log(’self’) console.log(self) console.log(’this’) console.log(this)//this和self一樣 }, error=>{ console.log(error) })

不過某些瀏覽器的某些版本不支持es6的語法，可能導致各種各樣的問題

補充知識：vue在全局函數中加回調，調用vue文件中的函數

全局函數可以寫一個文件globalFunc.js

exports.install = function(Vue, option){ Vue.prototype.setData = function(that, key){ that[key] = ’222’ } Vue.prototype.testCallMe = function(str){ console.log(’test call me’ + str) } Vue.prototype.testCallBack = function(func, param){ func(param) this.testCallMe(’tetetet’) }}

main.js

import globalFunc from ’@/components/globalFunc’

Vue.use(globalFunc)

vue文件中

調用

this.testCallBack(this.test, ’yui0’)//使用全局函數調用vue文件中的函數，修改vue文件中的數據

this.setData(this, ’msg’)//使用全局函數修改vue文件中的數據

test函數編寫

test:function(str){ this.msg = ’233’ + str},

以上這篇在vue中使用回調函數,this調用無效的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。