VueJS - AJAX 호출에서 반환된 데이터 반복

VueJS - AJAX 호출에서 반환된 데이터 반복

사용자 페이지에서 썸네일 이미지를 표시하기 위해 인스타그램의 API를 쿼리하는 탑재()와 함께 v-for를 사용하려고 한다.올바른 데이터를 콘솔에 성공적으로 기록할 수 있지만 어떤 이유로 v-for가 반환된 데이터에서 아무것도 표시하지 않는 경우.

여기 내 구성품

<template>
  <div class="container">
    <div class="row -border-top">
      <div v-for="(post, index) in posts" :key="index">
        <img v-bind:src="post.images.thumbnail.url">
      </div>

    </div>
  </div>
</template>

<script>

export default {
  data: function() {
      return {
        posts: ''
      }
  },
  mounted: function() {
      $.get( "https://api.instagram.com/v1/users/self/media/recent/?access_token=[token]", function( data ) {
        console.log(data.data); // works
        this.posts = data.data;
      });
    }
  }
</script>

보시다시피 데이터가 콘솔에서 올바르게 반환됨:

어떤 도움이라도 감사할 것이다.

계산된 속성은 값을 동시에 반환해야 한다.계산된 속성 내의 AJAX 호출은 콜백에서 값을 반환하지만 그 반환은 비동기적이므로 계산된 속성을 업데이트할 수 없다.

여기서 계산된 속성이란 말이 안 되는 것 같아.대신 데이터 가져오기를 권장한다.mounted()AJAX 콜백이 수신된 데이터를 데이터 속성에 저장하도록 하십시오(this.posts = data.data;).

데모를 하다

편집해야 할 필요가 있다.

<template>
  <div class="container">
    <div class="row -border-top">
      <div v-for="(post, index) in posts" :key="index">
        <img v-bind:src="post.images.thumbnail.url">
      </div>

    </div>
  </div>
</template>

<script>

export default {
  data: function() {
      return {
        posts: ''
      }
  },
  created() {
      $.get( "https://api.instagram.com/v1/users/self/media/recent/?access_token=[token]", function( data ) {
        console.log(data.data); // works
        this.posts = data.data;
      });
    }
  }
</script>

나한테도 통했으니까, 도움이 되길 바래 :)

참조URL: https://stackoverflow.com/questions/50440218/vuejs-iterating-over-data-returned-from-an-ajax-call