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 二 ...
随机推荐
- Web挂马方式整理
一:框架挂马 <iframe src=地址 width=0 height=0></iframe> 二:js文件挂马 首先将以下代码 document.write("& ...
- VC++代码上传到VSS上 注意事项
1.删除Debug文件,删除Release 文件2.删掉ncb,opt,clw,aps文件注.opt 工程关于开发环境的参数文件.ncb 无编译浏览文件(no compile browser).当自动 ...
- kafka学习总结之集群部署和zookeeper
1. 集群部署 kafka集群的瓶颈主要在网络和磁盘上:kafka依赖于zookeeper,zookeeper集群的节点采用奇数个,3个节点允许一个节点失败,5个节点允许2个节点失败. 图 1 ka ...
- 《TCP-IP详解卷1》中BGP部分的笔记
- Daily Scrum - 12/02
Meeting Minutes Shuo终于把文件存取弄好了!Wei大致把后端的代码整合好了,现在是可以基本实现算法的一个简易背单词版本.另外我们又交流了一下UI方面的事情,发现还是有一些问题(特别是 ...
- Sed 静默替换文件内容 以及 awk 的简单使用
1. Sed的help 鸟哥说的 学东西 先看 help 先看man 再google 不好FQ再百度.. Usage: sed [OPTION]... {script-only-if-no-other ...
- android 命令行安装apk
有两种方式可以在android模拟器或真机上使用命令行安装apk 一种是使用adb install命令,网上通常是这种方式 另一种是通过android提供的命令,pm install. 需要先进入an ...
- OneZero团队Beta发布剧透
统计界面暂不透露,尽请期待.
- Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 0. 准备工作
一.关于 Python Python 是全球使用人数增长最快的编程语言!它易于入门.功能强大,从 Web 后端 到 数据分析.人工智能,到处都能看到 Python 的身影. Python 有两个主要的 ...
- AOP 貌似是拦截器 对方法进行拦截
AOP 貌似是拦截器 对方法进行拦截