У меня есть v-for l oop, где я l oop через некоторые данные, возвращенные из моего API, и установил ключ, равный идентификатору объекта в API. Теперь я хочу создать событие click, которое получает значение v-bind: key для элемента clicked. Это сделано для того, чтобы я мог найти все данные этого объекта в массиве 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>