Vue 报错TypeError: this.$set is not a function 的解决方法
报错场景:将APi中得到的response数据,用Vue$set()使数据动态响应
报错代码:
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:在执行函数中定义指向Model的变量letvm=this,用该变量替代this
methods:{ textTranslate:function(text,to){ letvm=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改为箭头函数的写法,这样子箭头函数里的this其实是指向VueModel的,这样子用this看不会报错了
success:(data)=>{ this.$set(this.$data,'translatedText',data.translation[0]) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。