vue3+antd+axios 列表展示评论,用户点击其中一条评论就能得到发出这条评论的用户的信息的实现代码
时间: 2024-02-22 08:01:02 浏览: 121
以下是一个简单的实现示例:
```vue
<template>
<div>
<ul>
<li v-for="comment in comments" :key="comment.id" @click="getUserInfo(comment.userId)">
{{ comment.content }}
</li>
</ul>
<div v-if="selectedComment">
<h3>User Info</h3>
<p>Name: {{ selectedUser.name }}</p>
<p>Email: {{ selectedUser.email }}</p>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { List, Avatar } from 'ant-design-vue';
import axios from 'axios';
export default {
setup() {
const comments = ref([]);
const selectedComment = ref(null);
const selectedUser = ref(null);
// 获取评论列表
const getComments = async () => {
const response = await axios.get('/api/comments');
comments.value = response.data;
};
// 获取用户信息
const getUserInfo = async (userId) => {
selectedComment.value = comments.value.find((comment) => comment.userId === userId);
const response = await axios.get(`/api/users/${userId}`);
selectedUser.value = response.data;
};
return {
comments,
selectedComment,
selectedUser,
getComments,
getUserInfo,
};
},
mounted() {
this.getComments();
},
};
</script>
```
在这个示例中,我们使用了 `ant-design-vue` 库来实现评论列表的展示。当用户点击其中一条评论时,调用 `getUserInfo` 方法来获取发出这条评论的用户信息,然后在页面上展示出来。请注意,在实际应用中,需要根据实际情况进行修改。
阅读全文