title: how to show some user posts to ajax api vue js
body: <p>i just display 5 users post in modal </p>
  
  <p>html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="app"&gt;
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr v-for="user,i in users"&gt;
            &lt;td&gt; &lt;b-button v-b-modal.modal-1 v-on:click="Showpost(user.id, i)"&gt;{{user.id}}&lt;/b-button&gt;&lt;/td&gt;
            &lt;b-modal  id="modal-1" title="info" &gt;
              &lt;p class="my-4"&gt;{{posts.title}}&lt;/p&gt;
            &lt;/b-modal&gt;
            &lt;td&gt;{{user.name}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre class="lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
      users: [],
      posts: [],
    },
    methods: {
      Showpost(id,i) {
        console.log("id",id);
        console.log("i",i)
        fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id)
          .then(response =&gt; response.json())
          .then((data) =&gt; {
            this.posts = data[i];
          })
      },
    },
    computed: {
      object: function(){
        return this.posts.filter(function(post){
          return post.userId &gt;= 5
        })
      },
    },
    mounted() {
      fetch("https://jsonplaceholder.typicode.com/users")
        .then(response =&gt; response.json())
        .then((data) =&gt; {
          this.users = data;
        })
    },
  });
  </code></pre>