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