Question

这是我正在处理的问题。附件是index.html。

实施下一个和上一个按钮，以导航到API提供商的下一个/上一个帖子（https://jsonplaceholder.typicode.com）。

创建一个显示当前帖子ID的新标签。

奖励积分：创建一个新阵列以存储以前检索过的所有帖子，并将其显示在列表中。 API来自jsonplaceholder.typicode.com，因此您不需要实现它。一个jsfiddle将非常感激。

    <!DOCTYPE html>
    <html>
    <head>
<title>Vue Test</title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css' />

<div id="app">
  <h1>{{ message }}</h1>
  <div>
    <span>{{post.title}}</span>
  </div>
  <button v-on:click="previousPost">Previous Post</button> <!-- // new vue      directive - v-on:click, also  -->
  <button v-on:click="nextPost">Next Post</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script
       src="https://code.jquery.com/jquery-3.1.1.min.js"
       integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
       ***emphasized text***crossorigin="anonymous"></script>

<script>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Welcome to Vue!',
    post: {},
    page: 1
  },
  mounted: function() {
    this.getPost()
  },
  methods: {
    nextPost: function() {

       this.page = this.page + 1 


      this.getPost()






      // Implement me
    },
    previousPost: function() {
      // Implement me

       this.page = this.page - 1

      this.getPost()



    },
    getPost: function() {
      var root = 'https://jsonplaceholder.typicode.com';

      $.ajax({
        url: root + '/posts/' + this.page,
        method: 'GET'
      })
      .then((data) => {
        console.log(data);
        this.post = data;
      });
    }
  }
})
</script>

<style>
  /* Add any additional styles here */
  body {
    padding: 20px;
  }
  div {
    margin: 12px 0;
  }

</style>

我还想知道那里的帖子ID是什么意思。我完成了一个显示下一个和上一个帖子的任务，但另外两个任务我有点困惑。

如何从AJAX请求创建以前检索过的帖子数组

0 个答案: