Javascript v-on：单击event Vue.js以显示用户帖子

我是一名学生，刚刚进入Vue.js，所以我对它还是一个新手。现在我正在做一个项目，我从一个API获取用户名，当你点击用户时，它必须显示相关的帖子，但这不起作用。当我用v-on:click事件单击按钮时。什么都不会发生，即使在控制台中也不会。所以我希望有人能帮我解决我的问题，我会非常感激

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>
`,
});

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]

在每次单击指定用户时对其进行更新：

newvue({
el:“应用程序”，
数据：{
用户：[]，
员额：[]，
帖子：“”
},
方法：{
展台（id，i）{
取回（“https://jsonplaceholder.typicode.com/posts?userId=“+id）
.then（response=>response.json（））
。然后（（数据）=>{
this.post=数据[i]；
})
},
},
安装的（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（response=>response.json（））
。然后（（数据）=>{
这个用户=数据；
})
},
模板：`
{{user.name}
{{post.title}}
`,
});
.flex{
显示器：flex；
柔性包装：包装；
}

JS-Bin

{
"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"
}
}

{
"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"
}