首页 > 其他分享 >Vue--this的指代问题及用法

Vue--this的指代问题及用法

时间:2023-09-14 22:46:12浏览次数:38  
标签:Vue 函数 vue -- axios 指代 data response

Vue--this的指代问题及用法

  • this在普通函数( function( ){ } )里,指代调用该函数(方法)的对象
  • this在箭头函数( ()=>{} )里,指代定义该箭头函数的外层对象

在axios调用当前vue实例的data:

  • axios回调函数( .then() )是在执行栈中被执行,其中this指向window,若要在axios中取后端数据并赋值给data,2种方法
    1. 回调函数内部改为箭头函数,this指向由window转为定义箭头函数外层对象即该vue实例
    2. 在函数内axios外定义临时变量保存当前vue实例,var that=this,在.then()中使用that即可
created: function () {
        var that=this
        axios({
            url: 'http://localhost:8088/api/Statistics',
            method: 'get',
            params: {
                user_id: that.$store.state.user_id //windows访问不了store
            }
        })
            .then(response=>{
                this.total=response.data[0],
                this.done=response.data[1],
                this.rest=response.data[2],
                this.today=response.data[3]
            })
    }
  • 特别地,created(),mounted(),destroyed()等实例生命周期的钩子函数的this指向该vue实例

标签:Vue,函数,vue,--,axios,指代,data,response
From: https://www.cnblogs.com/chuimber/p/17703726.html

相关文章

  • harbor-私有镜像仓库的离线安装部署
    harbor-私有镜像仓库的离线安装部署最低安装条件:资源最低限度推荐CPU2核4核内存4GB8GB最低软件要求:软件版本描述Dockerengine版本17.06.0-ce+或更高版本有关安装说明,请参阅Docker引擎文档DockerCompose版本1.18.0或更高版本有......
  • 金蝶云星空单据添加保管类型和保管者
    背景:保管者类型和保管者字段关联的是多类别基础资料列表字段和多类别基础资料字段,由于在企业的不同的业务场景下保管者可能存在供应商、客户或者业务组织三种情况,但是在系统中供应商、客户和业务组织为三个不同的基础资料,因此需要根据保管者尅性来确认对应可选择的保管者。注意......
  • CSP-J&S 2023 游记
    本游记中的时间均表示为日期(初赛基准时间/复赛基准时间)2023-9-14(-1/-36)创建了这篇游记。开始准备初赛,做了几份真题(\(CSP-S2015\),\(CSP-S2021\),\(CSP-S2022\)),但感觉没啥用,近几年的都做过,远古的又太简单。几乎没复习基础知识,感觉有点慌。......
  • 金蝶云星空单据添加货主类型和货主
     背景说明货主类型与货主字段关联的是多类别基础资料列表字段和多类别基础资料字段。由于在企业的不同的业务场景下货主可能存在供应商、客户或者业务组织三种情况,但是在系统中供应商、客户或者业务组织为三个不同的基础资料,因此需要根据货主类型来确认对应的可选择的号主。注......
  • PivotGridControl自定义行数据的统计公式
    我们在使用PivotGridControl进行数据统计的时候,用时候需要在不同的行使用不同的汇总公式的情况,本文就是为了说明怎么实现此功能,如下图说明 数据源: 注意:此时数据列指定的SummaryType设置的是Sum;并且数据列指定了为double类型  SummaryType指定的几种聚合函数,Max、Min、......
  • 日结
    今天配置了zookeeper,但是遇到问题,具体情况如下能启动zookeeper,当时查看状态出错。这里我以为是配置错误,于是删了又装了一遍,还是一样的问题。后来在评论区翻评论,看到了解决方法。由于我用的是云服务器,需要在/opt/module/zookeeper-3.5.7/conf/zoo.cfg中添加一行quorumListenOnAl......
  • 亿级高并发下如何进行估算和调优
    Java全能学习+面试指南:https://javaxiaobear.cn这篇主要讲解如何在大流量高并发场景下进行估算和调优。我们知道,垃圾回收器一般使用默认参数,就可以比较好的运行。但如果用错了某些参数,那么后果可能会比较严重,我不只一次看到有同学想要验证某个刚刚学到的优化参数,结果引起了线上G......
  • Python学习笔记-Python文件操作
    文件的编码简介计算机只能识别:0和1,那么我们丰富的文本文件是如何被计算机识别,并存储在硬盘中呢?使用编码技术(密码本)将内容翻译成0和1存入。编码技术即:翻译的规则,记录了如何将内容翻译成二进制,以及如何将二进制翻译回可识别内容。计算机中有许多可用编码:UTF-8GBKBig5等不同的编码,将......
  • 《看了受制了》第十六天,6道题,合计70道题
    2023年9月14日题目不难,但是有点恶心。今天写的这个是真受制ACWING1478签到签出题目理解这个就是要把时间都转化成秒,然后排序即可。代码实现#include<iostream>#include<cstring>#include<algorithm>usingnamespacestd;intn;pair<int,int>in[12],out[12];stri......
  • vue2.0 表单验证明明有值却提示错误
    明明有值却总是提示为空我的解决方法时将number转为字符串验证方法如图:(验证只可以输入数字)赋值时转为字符串: ......