[英]Vue.js pass bound data to click event handler
我有一个 v-for 循环,我循环遍历从我的 api 返回的一些数据,并将键设置为等于 api 中对象的 id。 现在我想创建一个点击事件来获取被点击元素的 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>
只需将该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);
}
您可以更新您的模板,例如:
v-on:click="getPostData(post._id)"
然后访问这个值,如:
getPostData(id) {
console.log(id);
}
此外, @click
只是v-on:click
指令的简写,因此您也可以根据需要使用它:
@click="getPostData(post._id)"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.