안녕하세요 선생님

[동현킴]

제가  

api 호출하는 작업을 진행하고 있는데

<template>

  <p v-for="(a, i) in 타이틀" :key="i">

  <div class="card">
    <h5 class="card-header">{{ i + 1 }}.Daily News</h5>
    <div class="card-body">
      <h5 class="card-title">{{ 타이틀[i] }}</h5>
      <hr size="5">
      <p class="card-text">{{ 기사내용[i] }}</p>
      <hr size="5">
      바로가기
    </div>
  </div>

  </p>

</template>

<script>

import axios from 'axios'
axios.get()

export default {
  name: 'App',
  components: {

  },

  data() {
    return {
      타이틀: [],
      링크: [],
      기사내용: [],
    }
  },

  mounted() {
    const { parse } = require('rss-to-json');
    // async await
    (async () => {

      var rss = await parse('https://cors-anywhere.herokuapp.com/https://fs.jtbc.co.kr/RSS/sports.xml');
      console.log(JSON.stringify(rss, null, 3))
    })();

    parse('https://cors-anywhere.herokuapp.com/https://fs.jtbc.co.kr/RSS/sports.xml')
      .then((rss) => {
        console.log(JSON.stringify(rss, null, 3));
        for (let i = 0; i < 10; i++) {
          this.타이틀.push(rss.items[i].title)
          this.링크.push(rss.items[i].link)
          this.기사내용.push(rss.items[i].description)
        }
      });

  },

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

호출하는 사이에 살짝의 로딩이 있는데
그 사이에 로딩스피너? (이 단어가 맞는지는 모르겠는데)
넣어서 사용자 ux가 편하게 
진행해볼려고하는데 
어떻게 진행해야할까요 ㅠㅠ?...

[동현킴]

5시간 고민했는데도 이건 해결이 안되네요..

[codingapple]

ajax요청 바로 전에 로딩중 UI 띄워주고  
ajax 성공 후에는 로딩중 UI 숨겨달라고 코드짭시다
로딩중 UI의 상태 저장할 data도 하나 있어야할듯요

[동현킴]

로딩 컴포넌트는 만들었고

this.loading = false 했는데 api 불러와졌는데도 계속해서 로딩창이 돌고있습니다...

ajax 요청 바로전에 ui띄우고 
ajax 요청 후에 ui가 
꺼지는 방법을 정확하게 모르겠습니다.

혹시 vue.js에서 참고할 강의가 있을련지요
모달창 강의 듣고왔는데 
ajax 요청하는 부분에서는 적용이 안됩니다.

[codingapple]

this.loading = false는 .then 안에 적읍시다

[동현킴]

        parse('https://cors-anywhere.herokuapp.com/https://www.youtube.com/feeds/videos.xml?channel_id=UChlgI3UHCOnwUGzWzbJ3H5w')
            .then((rss) => {
                this.loading = false
                console.log(JSON.stringify(rss, null, 3))
                this.loading = true 
                for (let i = 0; i < 10; i++) {   // 자바스크립트문의 for 반복문 10개의 기사 처리함.
                    this.타이틀.push(rss.items[i].title)
                    this.링크.push(rss.items[i].link)
                    this.기사내용.push(rss.items[i].description)
                    this.사진.push(rss.items[i].enclosures[0])     // 결과값을 타이틀 , 링크 ,기사내용, 사진 공간에 저장 push
                }
            });

이런식이 맞을까요..?

[동현킴]

흐억...성공 ㅠㅠㅠ!! 감사합니다... 이게 뭐라고 하루씩이나 걸렸네요

[글쓴이]

글