在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決
let self = this //使用新變量替換this，以免this無效
//updateStudentInfoToServer是一個將本身部分數(shù)據(jù)異步上傳的接口，接收三個參數(shù)，其中第一個是數(shù)據(jù)，第二、三個是函數(shù)，第二、三個函數(shù)使用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) //網(wǎng)絡(luò)成功的回調(diào)
}).catch(error=>{
console.log(error)
networkError(error) //網(wǎng)絡(luò)失敗的回調(diào)
})
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)
}
)
提交網(wǎng)絡(luò)數(shù)據(jù)是異步調(diào)用，所以會先返回然后才執(zhí)行成功、失敗的回調(diào)。
這種書寫方式，function的作用于決定了function的代碼塊內(nèi)使用this無法改變、獲取vue data中設(shè)置的變量
使用es6的箭頭語法可以實現(xiàn)this的隨處調(diào)用
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的語法，可能導(dǎo)致各種各樣的問題
補充知識：vue在全局函數(shù)中加回調(diào)，調(diào)用vue文件中的函數(shù)
全局函數(shù)可以寫一個文件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文件中
調(diào)用
this.testCallBack(this.test, 'yui0')//使用全局函數(shù)調(diào)用vue文件中的函數(shù)，修改vue文件中的數(shù)據(jù)
this.setData(this, 'msg')//使用全局函數(shù)修改vue文件中的數(shù)據(jù)
test函數(shù)編寫
test:function(str){
this.msg = '233' + str
},
以上這篇在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了Vue?編程式路由導(dǎo)航2022-04-04
vue2.0嵌套路由實現(xiàn)豆瓣電影分頁功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實現(xiàn)豆瓣電影分頁功能(附demo),這里整理了詳細的代碼,有需要的小伙伴可以參考下。2017-03-03
vue?proxytable代理根路徑的同時增加其他代理方式
這篇文章主要介紹了vue?proxytable代理根路徑的同時增加其他代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3不支持Filters過濾器的問題,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項的相關(guān)資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
vue3如何使用vant-picker封裝省市二級聯(lián)動
這篇文章主要介紹了vue3如何使用vant-picker封裝省市二級聯(lián)動，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue表單數(shù)據(jù)的綁定的相關(guān)資料，文中講解非常細致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要給大家介紹了關(guān)于Vue前端高效開發(fā)之列表渲染指令的相關(guān)資料,vue.js 使用的是 v-for 指令來處理組件元素的循環(huán)迭代邏輯,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue 組件參數(shù)校驗與非props特性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02