Vue 报错TypeError: this.$set is not a function 的解决方法


Posted in Javascript onDecember 17, 2018

报错场景:将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])
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 #Javascript
详解Vue This$Store总结
Dec 17 #Javascript
vue + element-ui的分页问题实现
Dec 17 #Javascript
Vue 中的受控与非受控组件的实现
Dec 17 #Javascript
js实现移动端轮播图
Dec 21 #Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 #Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 #Javascript
You might like
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
基于php-fpm的配置详解
2013/06/03 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery 选择器详解
2015/01/19 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现爬取图书封面
2018/07/05 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
工程专业求职自荐书范文
2014/02/08 职场文书
工地安全生产标语
2014/06/06 职场文书
镇创先争优活动总结
2014/08/28 职场文书
毕业生实习证明
2014/09/19 职场文书
放射科岗位职责
2015/02/14 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
Java获取字符串编码格式实现思路
2022/09/23 Java/Android