>source

문제가 있습니다.

Vue로 데이터를 나열 할 때 스피너를 사용하고 싶습니다. 그러나 setTimeout을 제공하는 것이 아니라 실제 데이터로드 중에 텍스트로드가 나타나고 브라우저가로드 프로세스를 완료하면 언로드되기를 원합니다.

어떻게 할 수 있습니까?

// Project List
getAllList: function(){
setTimeout(()=>{
 axios.get('api.php')
 .then(function(response){
            //console.log(response);
            app.listContent = response.data.listPro;
      });
}, 2000)
},

  • 답변 # 1

    데이터 가져 오기의로드 진행률을 정의합니다.

    // 0 = 시작되지 않음

    // 1 = 로딩 시작

    // 2 = 문제없이 로딩 완료

    // 3 = 문제가 있습니다.

    데이터에서 프로세스 소품을 정의합니다.

    data(){
       return {
          loading: 0
       }
    }
    
    

    그런 다음 메서드에서 로딩을 사용할 수 있습니다.

    getAllList: function(){
     this.loading = 1 
     const self = this
     axios.get('api.php')
     .then(function(response){
        app.listContent = response.data.listPro;
        self.loading = 2
     })
     .catch(err => {
        self.loading = 3
     })
    
    

    사용하여 데이터 개체에 도달하지 않으려면 const self 그런 다음 사용 () =>

    axios.get('api.php')
     .then((response) => {
        this.listContent = response.data.listPro;
        this.loading = 2
     })
    
    

    만약 loading == 2 그런 다음 텍스트를 표시하십시오. 그렇지 않다면 다르게 처리하십시오 ...

관련 자료

  • 이전 ruby - rails의 사용자 지정 도메인이 apptestcom - 3000에서 작동하지 않습니다
  • 다음 java - 기호가 배열 목록에 표시 될 때까지 데이터를 문자열에 저장하는 방법은 무엇입니까?