Vue 报错TypeError: this.$set is not a function 的解决方法
更新时间：2018年12月17日 11:17:15 作者：做一个有知识的流氓
这篇文章主要介绍了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的变量 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改为箭头函数的写法，这样子箭头函数里的this其实是指向VueModel的，这样子用this看不会报错了
success: (data) => {
this.$set(this.$data, 'translatedText', data.translation[0])
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
打包组件报错:Error:Cannot find module 'vue/compiler-sfc&ap
最近遇到这样的问题,vue组件库搭建过程中使用webpack打包组件时报错,本文给大家分享打包组件报错:Error: Cannot find module ‘vue/compiler-sfc‘的解决方法,感兴趣的朋友一起看看吧2023-12-12
本文给大家总结了Vue中操作dom元素的多种方法，每种方法结合实例代码给大家讲解的非常详细，需要的朋友参考下吧2022-12-12
一直对编译原理的东西都有一种恐惧感，感觉太难了，看不懂，打开vue3源码看到编译相关的代码，直接吓退。不要担心，小编今天带你一文吃透Vue3编译原理2023-02-02
这篇文章主要介绍了vue 判断两个时间插件结束时间必选大于开始时间的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了Vue中的MVVM原理和实现方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家详细介绍了vue中element-ui使用axios上传文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
国际化是指项目能够根据不同国家的语言进行转换,便于不同国家的用户使用,这篇文章主要给大家介绍了关于vue项目实现国际化的基本思路与详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
最新评论