我有一个v-for循环,在其中循环遍历从api返回的一些数据,并将键设置为等于api中对象的ID。现在,我想创建一个click事件,该事件获取clicked元素的v-bind:key值。这样一来,我就可以用它在我的posts []数组中查找该对象的所有数据。但是我不知道是否可以这样做,如果可以怎么办?
这是我的代码;
<template>
<div id="summary_section">
<h2>Summary</h2>
<div id="summary_board">
<div class="column">
<div class="head">
<h3>Opportunities</h3>
</div>
<div class="body">
<div class="post"
v-for="post in posts"
v-bind:key="post._id"
v-on:click="getPostData"
>
<p>{{ post._id }}</p>
<p class="company">{{ post.company_name }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return{
posts: []
};
},
created() {
axios.get('http://localhost:5000/')
.then(res => {
console.log(res.data);
const data = res.data;
this.posts = data;
})
.catch(error => console.log(error));
},
methods: {
UpdatePosts() {
axios.get('http://localhost:5000/')
.then(res => {
// console.log(res);
const data = res.data;
this.posts = data;
})
.catch(error => console.log(error));
},
getPostData(event) {
console.log(event);
}
}
}
</script>
答案 0 :(得分:4)
只需将id
作为参数传递给事件单击处理程序,如下所示:
v-on:click="getPostData($event,post._id)"
方法处理程序:
getPostData(event,id) {
console.log(event,id);
}
如果您不需要事件对象,可以这样做:
v-on:click="getPostData(post._id)"
和
getPostData(id) {
console.log(id);
}
答案 1 :(得分:3)
您可以像这样更新模板:
v-on:click="getPostData(post._id)"
,然后按以下方式访问此值:
getPostData(id) {
console.log(id);
}
此外,@click
只是v-on:click
指令的简写,因此,如果您愿意,也可以使用它:
@click="getPostData(post._id)"