javascript - 点击 v-for Div 获取对象数据
问题描述
我有一个带有 v-for 的 div,我想获取我单击的 div 的对象值。当我单击带有警报的 div 时,我尝试在数据中显示,但它不起作用。你能帮我解决这种情况吗?
<div id="ticketContent" v-for="ticket in tickets" @click="getTicketInformations">
<h5> Ticket : {{ ticket.ticketID }}</h5>
<p>Ticket Number : {{ticket.ticketNumber}}</p>
<p>Start Date : {{ticket.startDate}}</p>
<p>Expire Date : {{ticket.expireDate}}</p>
<p>Hours : {{ ticket.hours }} </p>
</div>
state : {
tickets :[
{"ticketID":1001,
"ticketNumber":"2783sA",
"startDate":"05/10/2018",
"expireDate":"10/21/2022",
"hours":"08:00-22:00"},
{"ticketID":1002,
"ticketNumber":"8a210j",
"startDate":"01/03/2018",
"expireDate":"01/03/2020",
"hours":"14:00-18:00"},
{"ticketID":1003,
"ticketNumber":"L90Np1",
"startDate":"10/01/2015",
"expireDate":"10/01/2020",
"hours":"10:00-20:00"},
{"ticketID":1004,
"ticketNumber":"L90Np1",
"startDate":"05/01/2015",
"expireDate":"05/01/2016",
"hours":"15:00-23:00"}],
}
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters({
tickets : 'tickets'
}),
},
methods : {
getTicketInformations(){
alert(ticket)
}
}
}
</script>
解决方案
尝试这个:
改变 vfor
<div id="ticketContent_(index)" v-for="(ticket, index) in tickets" @click="getTicketInformations(index)">
和方法:
getTicketInformations(index){
alert("clicked on ->" + document.getElementById(ticketContent_' + index + '))
}
推荐阅读
- php - 如何使用 isset() 和 foreach 在两个不同的数组中查找唯一值
- javascript - 将预加载器限制为父级
- javascript - 如何从除单击元素之外的所有元素中删除类?
- html - 停止继承子/父元素
- excel - 每天午夜和早上 7 点运行 excel 宏
- java - 有没有办法进行 spring data jpa 查询以查看字符串是否包含列表中的任何其他字符串?
- python - 无法让按钮调用内部函数,我不知道为什么
- c++ - 那是抽象的但具有非虚拟析构函数删除导致错误。这是为什么?
- javascript - 比较声明的函数,和一个FunctionObject,为什么后者可以控制全局变量(内部声明的变量名称相同)?
- visual-studio-code - 添加通用docker注册表时如何阻止visual-studio-code将“v2”附加到路径