今天在写项目的时候,发现了一个京城性忽略的问题,在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. Web挂马方式整理

    一:框架挂马 <iframe src=地址 width=0 height=0></iframe> 二:js文件挂马 首先将以下代码 document.write("& ...

  2. VC++代码上传到VSS上 注意事项

    1.删除Debug文件,删除Release 文件2.删掉ncb,opt,clw,aps文件注.opt 工程关于开发环境的参数文件.ncb 无编译浏览文件(no compile browser).当自动 ...

  3. kafka学习总结之集群部署和zookeeper

    1.  集群部署 kafka集群的瓶颈主要在网络和磁盘上:kafka依赖于zookeeper,zookeeper集群的节点采用奇数个,3个节点允许一个节点失败,5个节点允许2个节点失败. 图 1 ka ...

  4. 《TCP-IP详解卷1》中BGP部分的笔记

  5. Daily Scrum - 12/02

    Meeting Minutes Shuo终于把文件存取弄好了!Wei大致把后端的代码整合好了,现在是可以基本实现算法的一个简易背单词版本.另外我们又交流了一下UI方面的事情,发现还是有一些问题(特别是 ...

  6. Sed 静默替换文件内容 以及 awk 的简单使用

    1. Sed的help 鸟哥说的 学东西 先看 help 先看man 再google 不好FQ再百度.. Usage: sed [OPTION]... {script-only-if-no-other ...

  7. android 命令行安装apk

    有两种方式可以在android模拟器或真机上使用命令行安装apk 一种是使用adb install命令,网上通常是这种方式 另一种是通过android提供的命令,pm install. 需要先进入an ...

  8. OneZero团队Beta发布剧透

    统计界面暂不透露,尽请期待.

  9. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 0. 准备工作

    一.关于 Python Python 是全球使用人数增长最快的编程语言!它易于入门.功能强大,从 Web 后端 到 数据分析.人工智能,到处都能看到 Python 的身影. Python 有两个主要的 ...

  10. AOP 貌似是拦截器 对方法进行拦截

    AOP 貌似是拦截器 对方法进行拦截