gpt4 book ai didi

javascript - Vue.js 将绑定(bind)数据传递给单击事件处理程序

转载 作者:行者123 更新时间:2023-12-03 09:40:44 24 4
gpt4 key购买 nike

我有一个 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);
}

关于javascript - Vue.js 将绑定(bind)数据传递给单击事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60831697/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com