≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置:首页 > 网络编程 > vue.js

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

人气:5198 时间:2019-04-16

这篇文章主要为大家详细介绍了Vue 报错TypeError: this.$set is not a function 的解决方法,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!

 

报错场景:

将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])
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持512笔记。

本文来自:http://www.512pic.com/184/7139-0.html

注:关于Vue 报错TypeError: this.$set is not a function 的解决方法的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

关键词:vue.js

您可能感兴趣的文章

  • vue路由前进后退动画效果的实现代码
  • vue刷新页面时去闪烁提升用户体验效果的实现方法
  • Vuex 单状态库与多模块状态库分析
  • vue-cli中安装方法(图文详细步骤)
  • 浅谈vuex actions和mutation的异曲同工
  • 实现Vue的markdown文档可以在线运行的方法示例
  • vue-cli2.0转3.0之项目搭建的详细步骤
  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别分析
  • Vue源码解析之Template转化为AST的实现方法
  • vue使用pdfjs显示PDF可复制的实现方法
上一篇:vue中引入第三方字体文件的方法示例
下一篇:vue使用pdfjs显示PDF可复制的实现方法
热门文章
  • Vue 报错TypeError: this.$set is not a function 的解决方法
  • vue实现动态添加数据滚动条自动滚动到底部的示例代码
  • vue项目设置scrollTop不起作用(总结)
  • vue项目中使用vue-i18n报错的解决方法
  • iview实现select tree树形下拉框的示例代码
  • 分析关于element级联选择器数据回显问题
  • vue项目打包后打开页面空白解决办法
  • 解决element ui select下拉框不回显数据问题的解决
  • element-ui table span-method(行合并)的实现代码
  • element-ui 设置菜单栏展开的方法
  • 最新文章
    • 理解vue ssr原理并自己搭建简单的ssr框架
    • vue favicon设置以及动态修改favicon的方法
    • vue-router启用history模式下的开发及非根目录部署方法
    • 从零开始在NPM上发布一个Vue组件的方法步骤
    • Element input树型下拉框的实现代码
    • Vue 报错TypeError: this.$set is not a function 的解决方法
    • Vue.js组件高级特性实例分析
    • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
    • 分析Vue.js自定义tipOnce指令用法实例
    • 浅谈vuex actions和mutation的异曲同工

512笔记收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。