代码之家 › 专栏 › 技术社区 › Tim

VueJS-迭代从AJAX调用返回的数据

vuejs2 vue.js ajax

3

Tim · 技术社区 · 8 年前

我正在尝试将v-for与一个mounted()结合使用,该函数查询Instagram的API,以便显示用户页面上的缩略图。我可以成功地将正确的数据记录到控制台,但由于某些原因,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>

如您所见,数据在控制台中正确返回:

任何帮助都将不胜感激。

2 回复 | 直到 7 年前

1

3

tony19 thanksd 8 年前

计算属性必须同步返回一个值。computed属性内的AJAX调用从回调返回一个值,但该返回是异步的,因此无法更新computed属性。

我认为计算属性在这里没有意义。相反,我建议在 mounted() 钩子,并让AJAX回调将接收到的数据存储在数据属性中( this.posts = data.data; ).

demo

2

0

Alex 8 年前

你需要用

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

它和我一起工作,希望它能帮助你:)