v-on:click事件Vue.js以显示用户帖子 [英] v-on:click event Vue.js to show user posts
问题描述
我是一名学生，刚开始学习Vue.js，所以我对它仍然很陌生.现在，我正在一个项目中，我从一个API获取用户名，当您单击该用户时，它必须显示相关的帖子，但这是行不通的.当我单击带有v-on:click事件的按钮时.什么都没有发生，即使在控制台中也没有.因此，我希望有人能帮助我解决我的问题，我将非常感激.
I'm a student and I'm just getting into Vue.js so I'm still very new to it. Right now I'm making a project where I'm getting usernames from an API and when you click on the user it has to show the related post, but this is not working. When I click the button with the v-on:click event. nothing happens, not even in the console. So I hope someone can help me with my problem, I would really appreciate it.
main.js:
const app = new Vue({
el: "#app",
data: {
users: [],
posts: [],
},
methods: {
Showpost(id, i) {
fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id)
.then(response =>response.json())
.then((data) => {
this.posts = data;
})
},
},
mounted() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then((data) => {
this.users = data;
})
},
template: `
<div>
<td v-for="user, i in users">
<button v-on:click="Showpost(user.id, i)" >{{ user.name }}</button>
</td>
<h1>{{ posts.title }}</h1>
</div>
`,
});
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<div id="app">
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>
json用户:
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
json帖子:
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
推荐答案
尝试创建一个名为post的属性，并在每次点击指定用户时通过分配this.post=data[i]对其进行更新:
Try to create a property called post and update it on every click on a specified user by assigning this.post=data[i]:
new Vue({
el: "#app",
data: {
users: [],
posts: [],
post: ''
},
methods: {
Showpost(id, i) {
fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id)
.then(response => response.json())
.then((data) => {
this.post = data[i];
})
},
},
mounted() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then((data) => {
this.users = data;
})
},
template: `
<div class="flex">
<div v-for="user, i in users">
<button class="btn" v-on:click="Showpost(user.id, i)" >{{ user.name }}</button>
</div>
<h1>{{ post.title }}</h1>
</div>
`,
});
.flex{
display:flex;
flex-wrap:wrap;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
这篇关于v-on:click事件Vue.js以显示用户帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
