[英]Get a object data with click in v-for Div
我有一個帶有 v-for 的 div,我想獲得我單擊的 div 的 object 值。 當我單擊帶有警報的 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 + '))
}
您可以將 selectedTicket 屬性添加到 model 中,然后在單擊事件中將票證實例傳遞給 showTicket 方法。
<script src="http://unpkg.com/vue"></script> <style>.ticket{padding:5px; border-bottom:1px solid lightblue} </style> <div id="app" style="width:100vw"> Tickets: <div class="ticket" v-for="ticket in tickets" v-bind:key="ticketID" @click="showTicket(ticket)"> {{ticket.ticketNumber}} </div> <br/> Selected Ticket: <div>{{selectedTicket}}</div> </div> <script> new Vue({ el: "#app", data() { return { selectedTicket: null, 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" } ] } }, methods: { showTicket(ticket) { this.selectedTicket = ticket; } } }) </script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.