Onclick button isnt working in vue.js in option tag

Question

Im trying to get the item properties that is being clicked in the option button

This is my code

                                        <select @click="populate" class="form-control" tabindex="12">
                                            <option disabled value="" selected="selected">Select one</option>
                                            <option v-for="(payment, index) in paymentsSelect" @click="pop(payment)" 
                                                    :key="index" 
                                                    :value="payment.id">{{ payment.name }}
                                            </option>
                                        </select> 

this is my data

        selectedPayment: '',
        paymentsSelect: [],
      

these are my methods

pop(payment){
        console.log(payment)
    },
    populate(){
        var self = this

        this.$http.get(this.$backendUrl + 'subjects/payment_method')
        .then(function(response) {
            self.paymentsSelect = response.data.data
        })
        .catch(function() {})
    },

Answer 1

No need to add event, just bind the select input to a data property using v-model like:

 <select v-model="selectedPayment" class="form-control" tabindex="12">
    <option disabled value="" selected="selected">Select one</option>
      <option 
           v-for="(payment, index) in paymentsSelect"  
            :key="index" 
            :value="payment">
         {{ payment.name }}
       </option>
</select> 

selectedPayment changes when you select an option then use it in your script like this.selectedPayment