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

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

vuejs2 vue.js ajax

Tim · 技术社区 · 6 年前

我正在尝试将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 回复 | 直到 5 年前

tony19 steve 6 年前

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

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

demo

Alex 6 年前

你需要用

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

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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

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

6 年前