vue中,写在methods里的B方法去调A方法的数据,访问不到?
今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下:
getTaskList() {
api.growthDetails.taskList({
appChannel: this.$isH5 ? 2 : 1
}).then(res => {
if (res.data.obj) {
// 取数据
let resData = JSON.parse(res.data.obj) || {};
this.taskList = resData
// 获取列表内容
this.listData = resData.list && resData.list
// 需要传到详情页的字段
this.eventId = this.listData[0].eventId
this.taskCode = this.listData[0].taskCode
this.eventTypeId = this.listData[0].eventTypeId
}
})
},
// 获取商品详情信息
getTaskDetail() {
console.log('***', this.eventId)
api.growthDetails.taskDetail({
eventId: this.eventId,
taskCode: this.taskCode,
memberId: this.memberId,
appChannel: this.$isH5 ? 2 : 1,
eventTypeId: this.eventTypeId
}).then(res => {
console.log(res)
if (res.body.obj) {
this.taskDetail = JSON.parse(res.body.obj) || {}
// 判断title的长度
this.taskName = this.taskDetail.taskName
// 转换时间
this.taskDetail.startTime = utils.dateFormat("yyyy-MM-dd", this.taskDetail.startTime)
this.taskDetail.endTime = utils.dateFormat("yyyy-MM-dd", this.taskDetail.endTime)
}
})
}
我是在登录之后,进行调用的~
isLogin() {
utils.isLogin(true).then(user => {
this.memberToken = user.member_token
this.memberId = user.member_id
// 获取商品列表信息
this.getTaskList()
this.getTaskDetail()
}) },
其中getTaskDetail的方法中传入的参数,用的是从getTaskList取出来的存放的,但是在控制台打印不出存放的变量~~~~~~
然后,就去问了一下我的师傅,哈哈,一语道破~~
【思路】:
在A方法里面,将所需要的字段进行存储,这些字段在data中已经定义过,在B方法中,需要用到这些变量,直接用this.变量名,原则上是可以了,但是,
有一个地方要考虑一下,就是A方法里存储的时间, 肯定调接口然后存储, 接口是异步的, 一定要等这个接口成功,值存储好了 B方法才可以执行,不要A方法没来得及存储,就执行B方法
【怎么解决呢】
等A方法结束之后,在调用B方法,这是才能保证B方法中调用A方法的变量才会有值,有点类似于promise的思想,至于如何解决,就更简单了~~~
把isLogin里面改为:
isLogin() {
utils.isLogin(true).then(user => {
this.memberToken = user.member_token
this.memberId = user.member_id
// 获取商品列表信息
this.getTaskList()
// 去掉获取商品详情的方法
}) },
将商品详情的方法放到getTaskList获取商品成功之后写~
getTaskList() {
api.growthDetails.taskList({
appChannel: this.$isH5 ? 2 : 1
}).then(res => {
if (res.data.obj) {
// 取数据
let resData = JSON.parse(res.data.obj) || {};
this.taskList = resData
// 获取列表内容
this.listData = resData.list && resData.list
// 需要传到详情页的字段
this.eventId = this.listData[0].eventId
this.taskCode = this.listData[0].taskCode
this.eventTypeId = this.listData[0].eventTypeId
// 调用详情页
this.getTaskDetail()
}
})
},
哈哈哈~~~~ 解决啦 小问题是最容易被忽略的~
vue中,写在methods里的B方法去调A方法的数据,访问不到?的更多相关文章
- 在vue中写一个跟着鼠标跑的div,div里面动态显示数据
1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...
- Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...
- Vue中computed,methods 和watch
Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...
- vue中computed与methods的异同
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- Vue中computed、methods、watch的联系和区别
computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...
- Vue 中computed 与 methods 区别
1.示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- Vue中 computed 和 methods的区别
涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...
- Vue中解决路由切换,页面不更新的实用方法
前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...
- vue中使用axios(异步请求)和mock.js 模拟虚假数据
一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...
随机推荐
- 主流蓝牙芯片盘点,Nordic/TI/博通哪家强?
无线通信技术自19世纪中期诞生以来,从使用狼烟.火炬.闪光镜.信号弹等在视距内传输信息,到1838年塞缪尔・莫尔斯发明电报网,再到电报网被电话取代,再到几十年后的1895年马可尼首次从英国怀特岛到30 ...
- Linux内核分析作业四
扒开系统调用的三层皮 一.用户态.内核态和中断 一般现代CPU都有几种不同的指令级别 在高级别执行级别下,代码可以执行特权指令,访问任意的物理地址,称之为内核态 在相应的低指令执行级别下,代码的掌控范 ...
- 2013337朱荟潼 Linux第十八章读书笔记——调试
第十八章 调试 0.总结 oops 内核的调试配置 用Git进行二分搜索 bug总会有,简洁描述发给LKML 1. 准备开始 在用户级的程序里,bug表现比较直接:在内核中却不清晰. 2. 内核中的b ...
- Visual Studio 2015的安装和简单的单元测试
何为单元测试 绝大多数的软件都是由多人合作完成的,大家的工作相互有依赖关系.软件的很多错误都来源于程序员对模块功能的误解.疏忽或不了解其他模块的变化.如何能让自己负责的模块功能的定义尽量的明确,模块内 ...
- python 如何写CMD命令工具
#-*- coding: UTF- -*- import argparse import sys: sys.argv.append('--help') parser = argparse.Argume ...
- Docker(四)-Dcoker镜像
Docker 运行容器前需要本地存在对应的镜像,如果镜像不存在本地, Docker 会从镜像仓库下载(默认是Docker Hub公共注册服务器中的仓库). Docker Hub:https://hub ...
- Postgres数据库获取所有的索引信息的SQL
Study From:https://blog.csdn.net/u013992330/article/details/73870734 SELECT A.SCHEMANAME, A.TABLENAM ...
- 转帖 IBM要推POWER9,来了解一下POWER处理器的前世今生
https://blog.csdn.net/kwame211/article/details/76669555 先来说一下最新的POWER 9 在Hot Chips会议上首次提到的IBM Power ...
- Jquery 获取屏幕及滑块及元素的高度及距离
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- 通过动态包含和Ajax机制抽取Web应用的公共页面
在Java Web应用开发中,经常遇到的一种情况是,许多的页面中都包含着“公共页面”,这部分动态页面的特征是:访问量大,会带来较大的性能压力.功能设计上会动态地改变自身的元素.比如在登录前和登录后所展 ...