VueJS - перебирать данные, возвращаемые вызовом AJAX

Question

Я пытаюсь использовать v-for с mount (), который запрашивает API Instagram для отображения миниатюрных изображений со страницы пользователя.Я могу успешно записать правильные данные на консоль, но по какой-то причине 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>

Как вы можетевидите, данные правильно возвращаются в консоли:

Любая помощь будет высоко ценится.

Answer 1

Вам нужно отредактировать его с помощью

<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>

Это сработало со мной, надеюсь, оно вам поможет:)

Answer 2

Вычисляемые свойства должны возвращать значение синхронно.Вызов AJAX в вычисляемом свойстве возвращает значение из обратного вызова, но этот возврат является асинхронным и, следовательно, не может обновить вычисляемое свойство.

Я не думаю, что вычисленное свойство имеет здесь смысл.Вместо этого я бы порекомендовал извлечь данные в хуке mounted() и сделать так, чтобы обратный вызов AJAX сохранял полученные данные в свойстве данных (this.posts = data.data;).

demo