关于method中自定义方法无法使用this读取vue的data中的数据的解决办法

最新推荐文章于 2024-05-17 11:40:43 发布
最新推荐文章于 2024-05-17 11:40:43 发布
阅读量2.7k 收藏 3
点赞数 4
分类专栏： 非计算机专业的java学习笔记 前端踩坑笔记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56522868/article/details/120917143
版权

本人比较熟悉的是后端，但是无奈老板让写前端，只能硬着头皮上，但是在写前端的时候经常遇到一个问题，就是this指向老是发生变化，由于现在身边没有敲代码的本本，就直接画个草图记录一下，解决的思路来自这篇文章：微信小程序——普通回调函数中this拿不到data数据_hinataneji的博客-CSDN博客

根据这位博主文章的思路，我们如果想要在回调函数中让this指向vue组件，有两种办法：

一种是使用箭头函数，

一种是定一个全局变量把this存储下来。

经过实际项目测试，两种方法都非常好用，今天在家休息，突然就想起来记录一下，与大家共勉！！

 

casteraway
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue-组件3 data和methods
SevenSongyun的博客
12-21 784
Vue-组件58 data和methods 一、data 注意： 组件中的data必须用一个函数返回，返回的数据为一个对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue.js"></s...
vue 中自定义指令改变data中的值
12-29
通过局部自定义指令实现了一个拖动的指令 html: <div xss=removed v-drag={set:set}></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding...
解决Vue异步请求中this为undefined以及mounted中获取不到data的数据的问题
Ekertree的博客
07-23 5645
获取路由参数的两种方式this.$route.params.id用于获取如下形式的参数路径/idthis.$route.query.xxx用于获取如下形式的参数路径?xxx=…注意在异步请求中的this不是注意data中的值由created中的异步请求获取并赋值的，mounted中要进行引用的话，可能异步请求中还未返回结果就被引用了。......
vue里获取不到data_vue methods中取不到data值
weixin_39781550的博客
12-19 896
v圈调直年情，量的单框来离理这接法清都的为ue methods中取不到需朋朋支带不新器功几的事上为做的和时意后data值export default {name: "sysAdd",data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''...
在Vue中获取自定义属性方法:data-id的实例
10-14
主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中，html中调用methods中的方法修改data中的属性值会引起死循环
qq_44997319的博客
09-27 1066
vue中，html中调用methods中的方法修改data中的属性值会引起死循环
html为什么加载不到方法,为什么.html（）方法不会在元素中加载数据？
weixin_36079835的博客
06-07 382
听好了......所以，当你做到这一点$.get(uri, function(data){//Your functionality});你真的这样做$.ajax({url: uri,type: "GET",success: function(data) {//Your functionality}});默认情况下此返回页面HTML。或者，默认情况下，它首先检查页面上的MIME类型，如果找不到，则返...
在vue开发中会遇到methods方法里有一个函数嵌套另一个函数，最内层函数this取不到data数据，该怎么解决？
前端很杂，故名前端杂货铺 —— coderkey
12-08 3438
在vue的methods方法中两个函数互相嵌套，最内层函数this取不到data数据。（1）给最外层函数this重新赋值给一个变量。
Vue 计算属性或过滤器中this.xxx拿不到数据
qq_45977832的博客
05-21 1818
Vue 计算属性或过滤器中this.xxx拿不到数据 1.在计算属性中使用箭头函数 <template> <div>{{getId}}</div> </template> <script> export default { data() { return { id: 123, title: '标题', } }, getId:()=>{ //console.log(this.title);
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
qq_45634989的博客
08-18 6010
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
vue data中的this指向问题
s4944315的博客
09-15 3197
在data里定义Object类型的变量时，会发现Object中访问不到vue的this属性。 例如： export default { data(){ return { a: "123", b: { c: this.a } }; }, created() { console.log("b: ", this.b.c); // undefined } } 这种情况可以用到Object的get属性进行属性定义。
vue 需求 data中的数据之间的调用操作
11-19
我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 ...
在Vue mounted方法中使用data变量详解
01-21
如下所示： data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = ...以上这篇在Vue mounted方法中使用data变量详解就是小编分享给大家的全部内容了，希望能给大
Spring boot + shiro 跨域失效
江湖人称小程的博客
09-19 2880
在 Springboot 中解决跨域有好几种方式，比如： 使用 @CrossOrigin 注解 实现 WebMvcConfigurer，然后重写它的 addCorsMappings 方法。 这两种方式在 springboot 中都能解决跨域的问题，但是在整合shiro后，跨域就失效了。 原因是：shiro的过滤器会在跨域处理之前执行，这就导致未允许跨域的请求先到达shiro过滤器，这样就会出现...
[uniapp]请求数据与接口封装
weixin_48047636的博客
07-16 172
ctrl+c停了接口后的效果。
Vue----mounted()中获取不到data()中的数据
xuan15591076576的博客
05-23 3204
在没有细致的了解Vue的生命周期之前，我一直以为created()执行完后才会执行mounted()，但是在实际开发中，当我们在mounted()中获取data()中的数据时，获取的的却是空值。mounted()就开始执行了，那么这时去获取数据肯定就是空值了，而mounted()只会调用一次，这样mounted()永远等不到created()获取完数据后再渲染。只需要在mounted()中设置一个定时器，由于created()获取数据的速度非常快，因此只需要等待一点时间就解决这个问题了。
vue中this失效问题
qq_44716001的博客
05-31 1108
点击confirm按钮后，执行function方法中，如果在方法内容要使用data中定义的一个变量，使用this.ids时，发现此时的this是undefined，无法直接进行引用，原因是因为。箭头函数出现在es6，箭头函数里面没有this对象，此时的this对象指的是是外层的 this 对象，所以入如果在函数中要引用外面的this对象，推荐使用箭头函数。this.$modal.confirm('是否确认删除编号为"' + _that.ids + '"的数据项？
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1185
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue中，如何通过拼接的方式读取到data中的变量名称
05-26
在 Vue 中，可以通过使用方括号 `[]` 来动态地获取一个对象的属性或者调用一个方法。因此，可以将变量名作为字符串拼接到方括号中，从而动态地获取 data 中的变量。 例如，如果有一个变量名为 `propertyName`，需要获取 `data` 对象中的属性值，可以使用以下方式： ```html <template> <div>{{ data[propertyName] }}</div> </template> ``` 这样，Vue 就会根据 `propertyName` 的值来获取 `data` 对象中对应的属性值。 同样地，如果需要调用一个方法，也可以使用类似的方式： ```html <template> <div>{{ methods[methodName]() }}</div> </template> ``` 其中 `methods` 是一个包含方法的对象，`methodName` 是一个字符串，表示要调用的方法名。这样就可以根据 `methodName` 动态地调用对象中的方法了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值