@change does not trigger function in method (in quasar)

user_19591901 0
Viewed 38

I am trying to get select value while selecting an option in a function which is called in methods, but it does not trigger the function.

My code:

from template :

<q-select filled v-model="invoice_product.tarrif_item_id"  @change="getItem($event)" use-input 
   input-debounce="0" 
   label="Search Item Name" :options="options" @filter="filterFn" dense behavior="menu" 
   class="q-ma-xs" option-value="id" option-label="name" emit-value map-options>
       <template v-slot:no-option>
            <q-item>
                <q-item-section class="text-grey">
                   No results
                </q-item-section>
             </q-item>
       </template>
  </q-select>

From methods:

methods: {
    getItem(event) {
        alert(event.target.value)
    }
},

Nothing happens while selecting an option.

quasar quasar-framework vuejs2 vue.js javascript
1 Answers

Try to use @input instead of @change:

new Vue({
  el: '#q-app',
  data: function () {
    return {
      options: [{id:1, name: 'a'},{id:2, name: 'b'},{id:3, name: 'c'}],
      invoice_product: {}
    }
  },
  methods: {
    getItem(event) {
        console.log(event)
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@1.19.5/dist/quasar.min.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <q-select filled v-model="invoice_product.tarrif_item_id"  @input="getItem($event)" use-input 
   input-debounce="0" 
   label="Search Item Name" :options="options" dense behavior="menu" 
   class="q-ma-xs" option-value="id" option-label="name" emit-value map-options>
       <template v-slot:no-option>
            <q-item>
                <q-item-section class="text-grey">
                   No results
                </q-item-section>
             </q-item>
       </template>
  </q-select>
  {{invoice_product}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.19.5/dist/quasar.umd.min.js"></script>

user_119891890
Related