Vue 報錯TypeError: this.$set is not a function 的解決方法
更新時間：2018年12月17日 11:17:15 作者：做一個有知識的流氓
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
報錯場景：將APi中得到的response數(shù)據(jù)，用Vue$set()使數(shù)據(jù)動態(tài)響應(yīng)
報錯代碼：
methods: {
textTranslate: function (text, to) {
$.ajax({
url: 'http://openapi.youdao.com/api',
type: 'post',
dataType: 'jsonp',
data: {
q: text,
appKey: this.appKey,
salt: this.salt,
from: this.from,
to: to,
sign: md5(this.appKey + text + this.salt + this.key)
},
success: function (data) {
this.$set(this.$data, 'translatedText', data.translation[0])
}
})
}
}
報錯原因：這里的this指向的不是VueModel,
解決方法1:在執(zhí)行函數(shù)中定義指向Model的變量 let vm = this ,用該變量替代this
methods: {
textTranslate: function (text, to) {
let vm = this
$.ajax({
url: 'http://openapi.youdao.com/api',
type: 'post',
dataType: 'jsonp',
data: {
q: text,
appKey: this.appKey,
salt: this.salt,
from: this.from,
to: to,
sign: md5(this.appKey + text + this.salt + this.key)
},
success: function (data) {
vm.$set(vm.$data, 'translatedText', data.translation[0])
}
})
}
}
解決方法2:將。siccess改為箭頭函數(shù)的寫法，這樣子箭頭函數(shù)里的this其實(shí)是指向VueModel的，這樣子用this看不會報錯了
success: (data) => {
this.$set(this.$data, 'translatedText', data.translation[0])
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-router的基本使用和配置教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧,需要的朋友可以參考下2018-11-11
vue最強(qiáng)table vxe-table 虛擬滾動列表 前端導(dǎo)出問題分析
最近遇到個問題,后臺一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強(qiáng)table vxe-table 虛擬滾動列表 前端導(dǎo)出問題,感興趣的朋友一起看看吧2023-10-10
vue實(shí)現(xiàn)登錄時的圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時的圖片驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
vue3選項(xiàng)式api如何監(jiān)控數(shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控數(shù)組變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue?懸浮窗且?guī)ё詣游焦δ軐?shí)現(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐?shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue中全局變量的定義和使用，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Vue 使用計時器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
這篇文章主要介紹了Vue 使用計時器實(shí)現(xiàn)跑馬燈效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
有些時候客戶希望產(chǎn)品使用他們公司要求的字體,這個時候我們需要將客戶提供的字體文件引入到項(xiàng)目中,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目導(dǎo)入字體文件的方法步驟,需要的朋友可以參考下2024-03-03
在項(xiàng)目中使用ref時有時候直接取值,有時候返回的卻是一個數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧2023-11-11