मेरे पास वी-फॉर के साथ एक 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>
0
silentcontrol 25 अक्टूबर 2019, 17:54

2 जवाब

सबसे बढ़िया उत्तर

आप मॉडल में चयनित टिकट संपत्ति जोड़ सकते हैं और फिर क्लिक ईवेंट में टिकट विधि दिखाने के लिए टिकट उदाहरण पास कर सकते हैं।

<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>
0
Edin Omeragic 27 अक्टूबर 2019, 13:41

ये कोशिश करें:

Vfor . बदलें

<div id="ticketContent_(index)" v-for="(ticket, index) in tickets" @click="getTicketInformations(index)">

और विधि:

getTicketInformations(index){
        alert("clicked on ->" + document.getElementById(ticketContent_' + index + '))
      }
0
Constantin Trepadus 25 अक्टूबर 2019, 18:03