How can I display 5 user posts in a modal using HTML and JavaScript?
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>
JavaScript:
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;
})
},
});