Question

我正在学习VueJs。我做了一个简单的项目，你可以在这里看到：

＆＃13;

var vuePosts = new Vue({
  el: '#vue-posts',
  data: {
    posts: [
      {title: 'title 1', body: 'message 1'},
      {title: 'title 2', body: 'message 2'}
    ]
  }
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div class="vue-test" id="vue-posts">
  <h1>Vue Test</h1>
  <ul v-for="post in posts">
    <li>
      <h1>{{post.title}}</h1>
      <p>{{post.body}}</p>
      <hr />
    </li>
  </ul>
</div>

＆＃13;

正如你所看到的，我正在做一个v-for并为js文件发帖子。

我的问题是我应该怎么做我想使用来自外部来源的数据，如

https://jsonplaceholder.typicode.com/posts

如何将数据导入我的data:并将其命名为帖子？

Answer 1

您可以创建一个方法，该方法将调用远程API，获取数据并将其分配给您的数据变量this.posts。受问题here启发的代码如下所示：

  methods: {
    getPosts: function() {
      var that = this
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'GET'
      }).then(function (response) {
        if(response.error) {
          console.err("There was an error " + response.error);
        } else {
          console.log(response.posts);
          this.posts = response.posts
        }
      }).catch(function (err) {
        console.error(err);
      });
    }
  }

并且您可以从已安装的块中调用此方法，这将在您的组件安装时获取并分配帖子。

mounted () {
  this.getPosts()
}

您还可以查看我的answer如何使用axios进行api调用的HTTP客户端

请参阅工作笔here。

VueJS连接到外部数据

1 个答案: