本文介紹了v-on:點(diǎn)擊事件 Vue.js 顯示用戶(hù)帖子的處理方法，對(duì)大家解決問(wèn)題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧！
問(wèn)題描述
我是一名學(xué)生，我剛剛接觸 Vue.js，所以我對(duì)它還是很陌生.現(xiàn)在我正在做一個(gè)項(xiàng)目，我從 API 獲取用戶(hù)名，當(dāng)你點(diǎn)擊用戶(hù)時(shí)，它必須顯示相關(guān)的帖子，但這不起作用.當(dāng)我單擊帶有 v-on:click 事件的按鈕時(shí).沒(méi)有任何反應(yīng)，甚至在控制臺(tái)中也沒(méi)有.所以我希望有人能幫助我解決我的問(wèn)題，我真的很感激.
main.js:
const app = new Vue({埃爾:#app"，數(shù)據(jù): {用戶(hù):[]，帖子:[]，},方法: {Showpost(id, i) {fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id).then(response =>response.json()).then((數(shù)據(jù)) => {this.posts = 數(shù)據(jù)；})},},掛載(){fetch("https://jsonplaceholder.typicode.com/users").then(response => response.json()).then((數(shù)據(jù)) => {this.users = 數(shù)據(jù)；})},模板:`<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="zh"><頭><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" ><title>用戶(hù)</title></頭><身體><h1>用戶(hù)</h1><div id="app"></div><script src="https://unpkg.com/vue"></script><script src="./main.js"></script></身體></html>
json 用戶(hù):
<代碼>{身份證":1，名稱(chēng)":莉安·格雷厄姆"，用戶(hù)名":布雷特"，"email": "Sincere@april.biz",地址": {街":庫(kù)拉斯之光"，"套房": "Apt. 556",城市":格溫伯勒"，"郵編": "92998-3874",地理":{緯度":-37.3159"，液化天然氣":81.1496"}},電話(huà)":1-770-736-8031 x56442"，網(wǎng)站":hildegard.org"，公司": {名稱(chēng)":羅馬格拉-克羅納"，"catchPhrase": "多層客戶(hù)端-服務(wù)器神經(jīng)網(wǎng)絡(luò)",bs":利用實(shí)時(shí)電子市場(chǎng)"}}json 帖子:
<代碼>{用戶(hù)ID":1，身份證":1，"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",body":quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto"} 解決方案 嘗試創(chuàng)建一個(gè)名為 post 的屬性，并通過(guò)分配 this.post= 在指定用戶(hù)的每次點(diǎn)擊時(shí)更新它數(shù)據(jù)[i]:
new Vue({埃爾:#app"，數(shù)據(jù): {用戶(hù):[]，帖子:[]，郵政: ''},方法: {Showpost(id, i) {fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id).then(response => response.json()).then((數(shù)據(jù)) => {this.post = 數(shù)據(jù)[i];})},},掛載(){fetch("https://jsonplaceholder.typicode.com/users").then(response => response.json()).then((數(shù)據(jù)) => {this.users = 數(shù)據(jù)；})},模板:`<div 類(lèi)="彈性"><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{顯示:彈性；彈性包裝:包裝；}
<!DOCTYPE html><html><頭><meta name="description" content="Vue.delete"><meta charset="utf-8"><元名稱(chēng)=視口"內(nèi)容=寬度=設(shè)備寬度"><title>JS斌</title><鏈接 rel="stylesheet" 完整性="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script></頭><身體><div id="app"></div>
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" >
<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 users :
{
"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 posts :
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto"
}
解決方案 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" 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>
這篇關(guān)于v-on:點(diǎn)擊事件 Vue.js 顯示用戶(hù)帖子的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來(lái)源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問(wèn)題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請(qǐng)聯(lián)系我們刪除處理，感謝您的支持！