Блог

Я создаю spa с использованием laravel и vue, у меня есть компонент vue, который не извлекает данные из базы данных, я определил данные как массив внутри него, но иногда браузер не загружает содержимое (данные), когда я перехожу на вкладку dev tools network, я вижу статус ожидания для этих данныхиногда это происходит, когда я извлекаю данные из базы данных (используя axios), это происходит не только в Chrome, но и в opera, в этот момент я вижу DOM без динамического содержимого, потому что это spa, он не перезагружается, когда я перезагружаю содержимое страницы, загружаю, проще говоря, данныене загружается (остается в режиме ожидания), пока я не перезагружу страницу

Я загрузил проект для тестирования, см. Страницы ниже

ссылка на страницу, которая не извлекает данные из базы данных

ссылка на страницу, которая извлекает данные из базы данных

вот код для

 <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>
                  amp;nbsp; amp;nbsp; amp;nbsp;<span class="countDown"> amp;nbsp;amp;nbsp;{{ counterz }} amp;nbsp;</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>
  

Спасибо