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其實是指向VueModel的，這樣子用this看不會報錯了
success: (data) => {
this.$set(this.$data, 'translatedText', data.translation[0])
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
打包組件報錯:Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時報錯,本文給大家分享打包組件報錯:Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
本文給大家總結(jié)了Vue中操作dom元素的多種方法，每種方法結(jié)合實例代碼給大家講解的非常詳細，需要的朋友參考下吧2022-12-12
一直對編譯原理的東西都有一種恐懼感，感覺太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
vue 判斷兩個時間插件結(jié)束時間必選大于開始時間的代碼
這篇文章主要介紹了vue 判斷兩個時間插件結(jié)束時間必選大于開始時間的代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue中狀態(tài)管理器(vuex)詳解以及實際應(yīng)用場景
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實際應(yīng)用場景的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue集成kindeditor富文本的實現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Vue中的MVVM原理和實現(xiàn)方法，文中講解非常細致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了vue中element-ui使用axios上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
國際化是指項目能夠根據(jù)不同國家的語言進行轉(zhuǎn)換,便于不同國家的用戶使用,這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)國際化的基本思路與詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04