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.
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>