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

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

vuejs2 vue.js ajax

Tim · 技术社区 · 7 年前

我正在尝试将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 年前

tony19 thanksd 7 年前

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

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

demo

Alex 7 年前

你需要用

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

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

推荐文章

James Williams · 如何在单击按钮时刷新div内容

3 年前

Atif Rizwan · 调用节点。使用AJAX的独立HTML文件的js API

3 年前

Mehmet · javascript执行了多个

3 年前

Shijil · 尝试在Jquery PHP搜索代码中添加选择标记功能

3 年前

Parker · 如何使表格行的单元格项加粗n秒?

3 年前

Chris J. · ajax获取查找数据属性值的请求

3 年前

GauravSolo · 在columndef datatable jquery中使用响应数据

3 年前

Hassaan Iqbal · 点击按钮打开网站,无需重新加载整个页面(AJAX)

3 年前

estudiante · 如何调用在tensorflow中运行的模型,该模型由ajax中的docker提供服务?

3 年前

Pedro F · Ajax调用后脚本运行不正常

3 年前