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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 从vue源码解析Vue.set()和this.$set()

    前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.

  • Vue.set() this.$set()引发的视图更新思考及注意事项

    Vue.set() this.$set()引发的视图更新思考及注意事项

    引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API:   this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr

  • 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

  • Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法

    问题一:安装模块时出现报错 Microsoft Visual C++ 14.0 is required,也下载安装了运行库依然还是这个错误 解决: 1.打开Unofficial Windows Binaries for Python Extension Packages(http://www.lfd.uci.edu/~gohlke/pythonlibs/),这里面有很多封装好的Python模块的运行环境 2.找到所需要下载的模块文件对应版本进行下载. 如,需要下载Pymssql,本机安装是32位

  • React报错之组件不能作为JSX组件使用的解决方法

    目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va

  • Mysql报错Duplicate entry '值' for key '字段名'的解决方法

    遇到这种问题, 是你的数据库表那个字段设置了唯一索引.所以这个字段新增的数据不能重复.具体可以打开表,然后点击表设置,具体教程可以看下文章最后 Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: Duplicate entry '测试' for key 'teacher.uk_name'    at sun.reflect.NativeConstructorAccessorI

  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    目录 一.简单介绍 二.报错现象 三.问题分析 四.问题处理 1.查看 node 版本和 node-sass 版本依赖关系 2.查看 当前 node 版本和 node-sass 版本是否符合依赖关系 3.当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader 4.尝试安装低版本的  sass-loader 5.运行 vue 工程,顺利通过了 总结 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够

  • 微信小程序报错：this.setData is not a function的解决办法

    微信小程序 报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入

  • Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决

    Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决

    目录 TypeError: Cannot create property ‘xxxx‘ on [Vue warn]: Error in nextTick: "TypeError: Right-hand side of 'instanceo 原因 解决办法 解决根据 TypeError: Cannot create property ‘xxxx‘ on 使用element的upload上传时报错 出现这种错通常是你的数据和需要的数据格式不匹配 查看官网发现需要的是这种格式[{},{}] 我的代码

  • Android Studio 报错failed to create jvm error code -4的解决方法

    安装完 Android Studio 后启动,却报错如下: 复制代码 代码如下: failed to create jvm error code -4 这一般应是内存不够用所致,解决方法参考如下. 打开 Android Studio 安装目录下的bin目录,查找并打开文件 studio.exe.vmoptions,修改代码: 复制代码 代码如下: -Xmx512m 为 -Xmx256m 保存后应即可正常打开了.

  • MongoDB添加仲裁节点报错：replica set IDs do not match的解决方法

    MongoDB添加仲裁节点报错：replica set IDs do not match的解决方法

    背景: 由于历史原因,某个MongoDB副本集只有一主一从双节点,无法满足自动故障转移要求,需要配置一个仲裁节点. 原有节点192.168.10.20:27017,192.168.10.21:27017,现在准备在20上配置一个新节点27018当做仲裁 在当前主节点上执行 repset:PRIMARY> cfg={_id:"repset", members:[{_id:0, host:'192.168.10.20:27017', priority:1},{_id:2, host:

  • React报错之Object is possibly null的问题及解决方法

    React报错之Object is possibly null的问题及解决方法

    目录 类型守卫 非空断言 总结 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef

随机推荐