Estoy tratando de obtener el valor seleccionado mientras selecciono una opción en una función que se llama en los métodos, pero no activa la función.
Mi código:
de la plantilla :
<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>De los métodos:
methods: { getItem(event) { alert(event.target.value) } },No sucede nada al seleccionar una opción.
Intenta usar @input en lugar de @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>