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])
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue项目报错：Uncaught SyntaxError: Unexpected token <
- 解决vue安装less报错Failed to compile with 1 errors的问题
- Vue.js报错Failed to resolve filter问题的解决方法
- Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法
- vue踩坑记-在项目中安装依赖模块npm install报错
- VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
- Vue 解决通过this.$refs来获取DOM或者组件报错问题
- Vue——解决报错 Computed property "****" was assigned to but it has no setter.
- vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
- Vue实战之项目开发时常见的几个错误汇总
相关文章
这篇文章主要介绍了vue自定义实例化modal弹窗,Vue.extend 属于Vue的全局 api，在实际业务开发中我们很少使用，因为相比常用的 Vue.component写法使用 extend 步骤要更加繁琐一些，本文结合实例代码给大家介绍的非常详细，需要的朋友参考下2022-09-09
下面小编就为大家分享一篇vue项目中引入noVNC远程桌面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
watch 函数用来侦听特定的数据源,并在回调函数中执行副作用,下面这篇文章主要给大家介绍了关于Vue3中watch监听使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中使用TypeScript的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
这篇文章主要给大家介绍了关于vue3中ace-editor简单使用的相关资料,ace-editor是一种代码编辑器,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue 组件上的v-model双向绑定原理,从本文的学习可以知道组件上v-model指令的本质也是生成了value属性和input事件，具体实例代码跟随小编一起看看吧2022-05-05
这篇文章主要为大家详细介绍了vue3实现抽奖模板设置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了前端Vue自定义地址展示地址选择地址管理组件的示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
这篇文章主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
下面小编就为大家分享一篇vue进行图片的预加载watch用法实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论