v-on:click 事件 Vue.js 显示用户帖子 [英] v-on:click event Vue.js to show user posts
本文介绍了v-on:click 事件 Vue.js 显示用户帖子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是一名学生,我刚刚接触 Vue.js,所以我对它还是很陌生.现在我正在制作一个项目,我从 API 获取用户名,当您单击用户时,它必须显示相关帖子,但这不起作用.当我单击带有 v-on:click 事件的按钮时.没有任何反应,即使在控制台中也没有.所以我希望有人能帮助我解决我的问题,我将不胜感激.
main.js:
const app = new Vue({el: "#app",数据: {用户:[],帖子:[],},方法: {Showpost(id, i) {fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id).then(response => response.json()).then((数据) => {this.posts = 数据;})},},安装(){fetch("https://jsonplaceholder.typicode.com/users").then(response => response.json()).then((数据) => {this.users = 数据;})},模板:`<div><td v-for="user, i in users"><button v-on:click="Showpost(user.id, i)" >{{ user.name }}</button></td><h1>{{ posts.title }}</h1>
`,});
html:
<html lang="zh-cn"><头><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>用户</title>头部><身体><h1>用户</h1><div id="应用程序">
<script src="https://unpkg.com/vue"></script><script src="./main.js"></script>