Vue.js vue beforeMount事件工作不正常
我阅读了文档,我知道如果我在安装前调用函数,它将按顺序执行。 这是我不知道为什么它停止工作的代码,它以前工作得很好,正如我所期望的那样 这里是代码,只是发布了相关的代码Vue.js vue beforeMount事件工作不正常,vue.js,Vue.js,我阅读了文档,我知道如果我在安装前调用函数,它将按顺序执行。 这是我不知道为什么它停止工作的代码,它以前工作得很好,正如我所期望的那样 这里是代码,只是发布了相关的代码 export default { data () { return { all_months: [], selected_month:"", } //end return },//end data beforeMount(){ if (localStor
export default {
data () {
return {
all_months: [],
selected_month:"",
} //end return
},//end data
beforeMount(){
if (localStorage.getItem('user') != null) {
this.user = JSON.parse(localStorage.getItem('user'))
//console.log(this.user)
this.register.parent_id = this.user.id
}
this.get_months();
console.log('hello from beforeMount')
console.log(this.selected_month)
console.log(this.all_months)
//this.proceed_date(this.all_months[0]);
}, // end beforeMount
mounted(){
console.log('hello from Mount')
console.log(this.selected_month)
},
methods: {
get_months: function () {
let api_token = this.user.api_token
axios.get('api/get_months?api_token='+api_token)
.then(response => {
if('success'==response.data.status)
{
for (let i = 0 ; i <response.data.total; i++) {
this.all_months.push(response.data.all_months[i])
} //for loop working fine
console.log('hellor from get_months')
console.log(this.all_months) //working fine
this.selected_month = response.data.all_months[0] //working fine
console.log(this.selected_month ) //working fine
}
})
.catch(err=>{
// this.snackbar_error = true
// this.snackbar_text = err.response.data.message
})
}, //end get_months
},//end methods
}//end export
导出默认值{
数据(){
返回{
所有月份:【】,
所选月份:“,
}//结束返回
},//结束数据
beforeMount(){
if(localStorage.getItem('user')!=null){
this.user=JSON.parse(localStorage.getItem('user'))
//console.log(this.user)
this.register.parent_id=this.user.id
}
这是我的生日;
log('hello from beforeMount')
console.log(此.selected\u月)
console.log(这是所有月份)
//本.继续日期(本.所有月[0]);
},//安装前结束
安装的(){
log('hello from Mount')
console.log(此.selected\u月)
},
方法:{
获取月份:函数(){
让api_令牌=this.user.api_令牌
axios.get('api/get_months?api_token='+api_token)
。然后(响应=>{
if('success'==response.data.status)
{
for(设i=0;i{
//this.snackbar_error=true
//this.snackbar_text=err.response.data.message
})
},//结束获取\u个月
},//结束方法
}//终端出口
目前,其工作流程如下所示
在boforeMount中调用this.get_months()函数,并为其赋值。在get_months中,所有的_months和其他函数也为this.selected_months赋值,并在该函数中打印。
但当我调用this.get_months后在beforeMount事件中访问它时,会给出空字符串或未定义
在此之前,它工作正常,正如预期的那样,我在get_months函数中设置值,并在get_months执行后在beforeMount中访问它
注释//this.procedue_date(this.all_months[0])的那一行也运行良好
这是目前的控制台输出流程。
hello from beforeMount
<empty string>
[]
0: "January 2019"
1: "February 2019"
2: "March 2019"
3: "April 2019"
4: "May 2019"
5: "June 2019"
6: "July 2019"
7: "August 2019"
8: "September 2019"
9: "October 2019"
10: "November 2019"
11: "December 2019"
12: "January 2020"
13: "February 2020"
14: "March 2020"
__ob__: Object { value: (15) […], dep: {…}, vmCount: 0 }
length: 15
<prototype>: Object { … }
hello from Mount
<empty string>
hellor from get_months
Array(15) [ "January 2019", "February 2019", "March 2019", "April 2019", "May 2019", "June 2019", "July 2019", "August 2019", "September 2019", "October 2019", … ]
January 2019
beforeMount中的hello
[]
0:“2019年1月”
1:“2019年2月”
2:“2019年3月”
3:“2019年4月”
4:“2019年5月”
5:“2019年6月”
6:“2019年7月”
7:“2019年8月”
8:“2019年9月”
9:“2019年10月”
10:“2019年11月”
11:“2019年12月”
12:“2020年1月”
13:“2020年2月”
14:“2020年3月”
__对象{value:(15)[…],dep:{…},vmCount:0}
长度:15
:对象{…}
山上的你好
他从几个月前就开始了
阵列(15)[“2019年1月”、“2019年2月”、“2019年3月”、“2019年4月”、“2019年5月”、“2019年6月”、“2019年7月”、“2019年8月”、“2019年9月”、“2019年10月”…]
2019年1月
我尝试过的解决方案
尝试访问挂载的事件中选择的\u月,但也无法访问
尝试在2到3小时内从internet找到解决方案,但无法解决
我很困惑Axios是一个基于承诺的HTTP客户端之前它是如何工作的,所以你应该看看承诺是如何工作的
this.get\u months()
在console.log('hello from beforeMount')
之前被调用的,但是在输出中,hello from beofemount
在this.get\u months()之前
的输出。我认为,因为javascipt处理异步和同步函数的方式不同,但我以前做过同样的事情,它按预期运行。这意味着它首先调用this.get\u month并为this.selected\u month赋值。但现在它做的是相反的…所以我很困惑它是如何运行的happend@MuhammadAhtisham在什么之前?把密码贴出来正在工作。get\u months
运行异步函数,因此此操作正常。中选择的\u month
已装入null@fabruex这是同一个代码,我也很困惑它以前是如何工作良好的。也许代码中有什么变化,我不记得了。