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 相关文章推荐
js或jquery实现页面打印可局部打印
Mar 27 Javascript
javascript继承机制实例详解
Nov 20 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
jquery自定义表格样式
Nov 23 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
7个JS基础知识总结
2014/03/05 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python正则表达式面试题解答
2020/04/28 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python重要函数eval多种用法解析
2020/01/14 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python 合并拼接字符串的方法
2020/07/28 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
你对IPv6了解程度
2016/02/09 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
爱情寄语大全
2014/04/09 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
赢在中国观后感
2015/06/02 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js