快捷導(dǎo)航

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)文章

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