v-on:点击事件 Vue.js 显示用户帖子

时间：2023-10-11

本文介绍了v-on:点击事件 Vue.js 显示用户帖子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是一名学生，我刚刚接触 Vue.js，所以我对它还是很陌生.现在我正在做一个项目，我从 API 获取用户名，当你点击用户时，它必须显示相关的帖子，但这不起作用.当我单击带有 v-on:click 事件的按钮时.没有任何反应，甚至在控制台中也没有.所以我希望有人能帮助我解决我的问题，我真的很感激.

main.js:

const app = new Vue({埃尔:#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 = 数据；})},模板:`<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><title>用户</title></头><身体><h1>用户</h1><div id="app"></div><script src="https://unpkg.com/vue"></script><script src="./main.js"></script></身体></html>

json 用户:

<代码>{身份证":1，名称":莉安·格雷厄姆"，用户名":布雷特"，"email": "Sincere@april.biz",地址": {街":库拉斯之光"，"套房": "Apt. 556",城市":格温伯勒"，"邮编": "92998-3874",地理":{纬度":-37.3159"，液化天然气":81.1496"}},电话":1-770-736-8031 x56442"，网站":hildegard.org"，公司": {名称":罗马格拉-克罗纳"，"catchPhrase": "多层客户端-服务器神经网络",bs":利用实时电子市场"}}

json 帖子:

<代码>{用户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"}

解决方案

尝试创建一个名为 post 的属性，并通过分配 this.post= 在指定用户的每次点击时更新它数据[i]:

new Vue({埃尔:#app"，数据: {用户:[]，帖子:[]，邮政: ''},方法: {Showpost(id, i) {fetch("https://jsonplaceholder.typicode.com/posts?userId=" + id).then(response => response.json()).then((数据) => {this.post = 数据[i];})},},挂载(){fetch("https://jsonplaceholder.typicode.com/users").then(response => response.json()).then((数据) => {this.users = 数据；})},模板:`<div 类="弹性"><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"><元名称=视口"内容=宽度=设备宽度"><title>JS斌</title><链接 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 完整性="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" 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 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" 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:点击事件 Vue.js 显示用户帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：在哪里托管 Wakanda [客户端/服务器端纯 JS '框架 下一篇：使用 inline-block 构建网格框架

v-on:点击事件 Vue.js 显示用户帖子

问题描述

相关文章

最新文章