如何解决待处理状态“开发工具”网络选项卡laravel和vue
我正在使用laravel和vue创建一个spa，我有一个vue组件，它不能从数据库中获取数据，我已经将数据定义为其中的数组，但是有时浏览器却没有加载内容（数据），当我进入开发工具网络标签时，我看到该数据的待处理状态，有时是在我从数据库（使用axios）中获取数据时发生的，不仅发生在chrome中，而且在歌剧中也是如此，那时我看到没有动态内容的DOM，因为它是不重新加载的spa，当我重新加载页面内容时，简而言之，直到重新加载页面时，数据才被加载（处于待处理模式）
link to the page which doesn't fetch data from database
link to the page which fetch data from database
这是代码
<template>
<div class="container text-center myCarousel">
<div class="text-center py-5 mb-4"><h1 class="pseudo_border">دقت کُن</h1></div>
<div v-if = "show">
<div class="text-center pb-2">
<template v-for="image in answer">
<img class="img-fluid" :src="image">
</template>
<span class="countDown"> {{ counterz }} </span>
</div>
</div>
<div v-if = "show2">
<div>
<div class="text-center marz" @click="evaluate(first)">
<template v-for="image in first" >
<img class="img-fluid" :src="image">
</template>
</div>
</div>
<div>
<div class="text-center mt-5 marz" @click="evaluate(second)">
<template v-for="image in second" >
<img class="img-fluid" :src="image">
</template>
</div>
</div>
<div>
<div class="text-center mt-5 marz" @click="evaluate(third)">
<template v-for="image in third" >
<img class="img-fluid" :src="image">
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
kalamat: ["/uploads/black.svg","/uploads/blue.svg","/uploads/brown.svg","/uploads/darkSeaGreen.svg","/uploads/green.svg","/uploads/indigo.svg","/uploads/lightBlue.svg","/uploads/orange.svg","/uploads/pink.svg","/uploads/purple.svg","/uploads/red.svg","/uploads/salmon.svg","/uploads/zard.svg"],myArray: [],id: this.$route.params.id,shomare: 0,first: '',second: '',third: '',answer: '',index : 1,rand: 0,random: 0,choice: '',audio: '',audio2: '',end: false,show: true,show2: false,myVar: null,countDown : 4,counter: null,iz: 0
}
},methods:{
shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i],a[j]] = [a[j],a[i]];
}
return a;
},getArray(){
this.kalamat = this.shuffle(this.kalamat);
this.myArray = this.kalamat.slice(0,this.index);
//this.rand = Math.floor(Math.random() * this.myArray.length);
this.random = Math.floor(Math.random() * 3);
this.answer = this.myArray.slice(0);
if(this.index < 9){
this.countDown = this.index + 3;
}else{
this.countDown = 11;
}
//this.str = this.myArray.join('-'); array ro string mikard
// this.str2 = this.myArray2.join('-');
if(this.random == 0){
this.third = this.answer;
}
else if(this.random == 1){
this.second = this.answer;
}
else if(this.random == 2){
this.first = this.answer;
}
this.first = this.filler(this.first);
this.second = this.filler(this.second);
this.third = this.filler(this.third);
this.countDownTimer();
this.myVar = setTimeout(() => {
this.show = false;
this.show2 = true;
},this.countDown * 1000);
},filler(a){
if(a == ''){
a = this.answer.slice(0,this.index);
a[Math.floor(Math.random() * this.answer.length)] = this.kalamat[Math.floor(Math.random() * this.kalamat.length)];
if(JSON.stringify(a) == JSON.stringify(this.answer)){
do{
this.kalamat =this.shuffle(this.kalamat);
a = this.kalamat.slice(0,this.index);
}while(JSON.stringify(a) == JSON.stringify(this.answer));
}
return a;
}
else{
return a;
}
},evaluate(a){
if(JSON.stringify(this.answer) != JSON.stringify(a)){
this.audio.play();// che bahal tarif kardam
}
if(JSON.stringify(this.answer) == JSON.stringify(a)){
this.audio2.play();
setTimeout(() => {
this.next();
},700);
}
},next(){
clearTimeout(this.myVar);
clearTimeout(this.counter);
this.first = '';
this.second = '';
this.third = '';
this.shomare++;
this.iz++;
if(this.index < 5){
this.index++;
}
if( this.iz == 7){
this.$router.push({name: 'storez',params: {id: this.id}});
return;
}
this.getArray();
//this.countDown = this.timer;
this.show = true;
this.show2 = false;
if(this.shomare == 10){
this.end = true;
}
},countDownTimer() {
if(this.countDown > 0) {
this.counter = setTimeout(() => {
this.countDown--;
this.countDownTimer();
},1000);
}
},},computed:{
counterz: function(){
return this.farsi(this.countDown);// gloabal method to turn digits into persian digits
}
},created(){
this.getArray();
this.audio = new Audio("/uploads/audio/qalat.mp3");
this.audio2 = new Audio("/uploads/audio/dorost.mp3");
// this.countDownTimer();
}
}
</script>
谢谢
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
