如何向ajax api vue js显示一些用户帖子

Question

i just display 5 users post in modal

html

<div id="app">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user,i in users">
          <td> <b-button v-b-modal.modal-1 v-on:click="Showpost(user.id, i)">{{user.id}}</b-button></td>
          <b-modal  id="modal-1" title="info" >
            <p class="my-4">{{posts.title}}</p>
          </b-modal>
          <td>{{user.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>

js

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 => response.json())
        .then((data) => {
          this.posts = data[i];
        })
    },
  },
  computed: {
    object: function(){
      return this.posts.filter(function(post){
        return post.userId >= 5
      })
    },
  },
  mounted() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then((data) => {
        this.users = data;
      })
  },
});

Answer 1

i will do so simple code to clear how this should be done

at first

<tbody>
    <tr v-for="(user,index) in users">
      <td> <b-button v-b-modal.modal-1 v-on:click="showUserPosts(user.id,index)">{{user.id}}</b-button></td>
      <b-modal  id="modal-1" title="info" >
      </b-modal>
      <td>{{user.name}}</td>
    </tr>
  </tbody>

then instead of

      this.posts = data[i];

do it

      this.posts = data;

and in your html under the table tag do

<p v-for="(post,index) in posts" v-text="post.title"></>

if you want just show one post not many make

data:function {
return{
users: [],
posts: {},
}
 },

and

<p v-if="post.title" v-text="post.title"></>

I hope this help you. Good luck!