VueJS 连接外部数据

Question

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

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

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

如您所见，我只是在做一个 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。