今天在写项目的时候,发现了一个京城性忽略的问题,在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方法的数据,访问不到?的更多相关文章

  1. 在vue中写一个跟着鼠标跑的div,div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...

  2. Vue 中 computed ,watch,methods 的异同

    methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...

  3. Vue中computed,methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  4. vue中computed与methods的异同

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  5. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

  6. Vue 中computed 与 methods 区别

    1.示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  7. Vue中 computed 和 methods的区别

    涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...

  8. Vue中解决路由切换,页面不更新的实用方法

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...

  9. vue中使用axios(异步请求)和mock.js 模拟虚假数据

    一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...

随机推荐

  1. PAT甲题题解-1056. Mice and Rice (25)-模拟题

    有n个老鼠,第一行给出n个老鼠的重量,第二行给出他们的顺序.1.每一轮分成若干组,每组m个老鼠,不能整除的多余的作为最后一组.2.每组重量最大的进入下一轮.让你给出每只老鼠最后的排名.很简单,用两个数 ...

  2. 词频统计 SPEC 20160911

    本文档随时可能修改,并且没有另行通知. 请确保每一次在开始修改你的代码前,读标题中的日期,如果晚于你上次阅读, 请重读一次. 老五在寝室吹牛他熟读过<鲁滨逊漂流记>,在女生面前吹牛热爱&l ...

  3. C/C+ 感触

    1.       C/C++语言开发的首选利器- C++Test       以前在windows平台下的开发,使用的框架主要是MFC,以及console工程(基于win32SDK),属于纯C/C++ ...

  4. Software-Defined Networking:A Comprehensive Survey--Day1

    Software-Defined Networking:A Comprehensive Survey 摘要: 传统网络复杂且难以管理,根据预定义策咯也难以对网络进行配置,也难以重新配置. 软件定义网络 ...

  5. USACO 2012 December ZQUOJ 24122 Scrambled Letters(二分)

    题意:有一个字典序名单,现在把这些名单的顺序和名字的字符顺序扰乱了,要输出原先的名字在原来的名单中的最低和最高位置. 分析:先将所有的名字串按字典序从小到大和从大到小分别排序smin[]和smax[] ...

  6. 简单封装DBUtils 和 pymysql 并实现简单的逆向工程生成class 类的py文件

    这里使用的 Python 版本是:Python 3.6.0b2. 涉及的三方库:DBUtils.pymysql 1.ConfigurationParser 通过调用Python内置的 xml.dom. ...

  7. DELPHI 字符串与日期格式互转

    procedure TForm1.Button1Click(Sender: TObject); var D:TDateTime; s:string; begin D:=VarToDateTime('0 ...

  8. ssh中文乱码解决

    在终端执行命令:export LC_ALL=zh_CN.GB2312;export LANG=zh_CN.GB2312是最有效的.=======================1.不管用那种ssh客户 ...

  9. C#动态对象(dynamic)示例(实现方法和属性的动态)

    C#的动态对象的属性实现比较简单,如果要实现动态语言那种动态方法就比较困难,因为对于dynamic对象,扩展方法,匿名方法都是不能用直接的,这里还是利用对象和委托来模拟这种动态方法的实现,看起来有点J ...

  10. Codeforces 1097 G. Vladislav and a Great Legend

    题目链接 一道好题. 题意:给定一棵\(n\)个点的树,求: \[\sum_{S\subseteq \{1,2,\dots,n\}}f(S)^k\] 其中\(f(S)\)代表用树边将点集\(S\)连通 ...