Vue 報錯TypeError: this.$set is not a function 的解決方法

更新時間：2018年12月17日 11:17:15 作者：做一個有知識的流氓

這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學習學習吧

報錯場景：將APi中得到的response數(shù)據(jù)，用Vue$set()使數(shù)據(jù)動態(tài)響應

報錯代碼：

 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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