The function in the method (in quasar) is not activated by the @change event

When I select an option, I am trying to retrieve the selected value in a function called within my methods. However, the function does not seem to be triggering.

This is my code:

From the 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 the methods:

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

Despite my efforts, nothing seems to happen when I select an option.

Answer №1

Consider using @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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9989c889a889ba9d8c7d8d0c7dc">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a1a5b1a3b1a290e1fee1e9fee5">[email protected]</a>/dist/quasar.umd.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing functions during the page loading process

I'm currently in the process of integrating a new payment method into a checkout page that does not have built-in support for it. The button on the page that redirects to an external payment portal requires specific parameters to be passed. I've ...

Manipulating CSS rules using JavaScript/jQuery

My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...

Converting JSON data to an Excel file in an Angular application

I'm working on exporting my JSON data to an XLSX file. Despite successfully exporting it, the format in the Excel file isn't quite right. Below is the code I am using: downloadFile() { let Obj = { "data": [12,123], "date": ["2018-10- ...

What is the best way to showcase all menu and submenu items in separate dropdown lists?

Having trouble with my code, it's not functioning properly. I can't pinpoint the error. The menu displays correctly but the submenu isn't showing up under specific menus. Here is the code snippet: ##Table: menus## id name ...

How can I properly initialize React components?

I am currently learning React.js and experimenting with a progress bar animation. I stumbled upon this code that I would like to incorporate into my project, but I am unsure of where to place it. Check out the code here! The JavaScript code in question i ...

After updating to the latest npm version, the NodeJS server continues to display the error message "Upgrade Required" when loading pages

After developing a Node project using NodeJS version 5.4.x and NPM version 3.3.12 on Windows, I encountered an issue where the project throws an "Upgrade Required" message (HTTP Error code - 426) upon loading the page after some time of inactivity. To add ...

Enhance video playback by eliminating accidental scrolling through the space bar

When using a video player, I always prefer to pause it by pressing the spacebar. However, this function is not working as expected. The issue at hand is that instead of pausing the video, pressing the space bar causes the page to scroll down unexpectedly ...

Utilize debounce functionality for custom filtering in a Vuetify data table

I am looking to enhance my search functionality by implementing a debounce method that would pause the search action after each keystroke for 1 second. However, even after implementing it, the search still occurs with every keystroke instead of waiting for ...

What is the best way to implement rate limiting for asynchronous API calls within a specific timeframe?

I have a project that requires me to make over 500 calls simultaneously from my NodeJS server to a third-party server. The issue is that the third-party server has a restriction of only allowing a maximum of 50 calls per second. Can someone assist me in im ...

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

Preparing data before using Kendo UI upload function is essential

I need to pass a data (specifically a GUID) to the upload method of the kendoUpload, so that a particular MVC Controller action method can receive this data each time the upload occurs. $("#propertyAttachmentUpload").kendoUpload({ async: { ...

Unveiling the Magic Bytes: Extracting the Image File in Multer for Magic Byte Verification in Express.js

Utilizing the fileFilter option within the multer plugin to determine whether an image should be saved on the server or not. Within the fileFilter function, there is a need to verify the magic bytes of these images in order to ensure they are legitimate a ...

Arrange two arrays by organizing them based on the contents of one in JavaScript

Consider the following two arrays: priceArray= [1, 5, 3, 7] userIdArray=[11, 52, 41, 5] The goal is to sort the priceArray in such a way that the userIdArray also gets sorted accordingly. The desired output should look like this: priceArray= [1, 3, 5, ...

Tips for injecting an Angular variable into a JavaScript variable

Within my angular controller, I have a function defined as follows: $scope.get_all_places = function () { $http.get("get-all-places").then(function (response) { $scope.selected_place = eval(response.data[0]); }); }; I am trying to assign ...

Troubleshooting Problems with jQuery's .remove() Function

I attempted to create a simple game using JS and jQuery, keeping in mind that I am new to both languages. My goal was to create a function that allows users to delete their save within the game. However, despite my efforts, I faced issues with the function ...

Problem encountered when selecting checkboxes in the item list

I have a Vue application called To Do List. After adding some notes by clicking the Add Task button, we receive a list of items to do. Each item has a delete button and a checkbox to mark it as done. The issue arises when I mark an item as checked and then ...

Tips for setting up bidirectional communication with props in a Vue.js component

Within my Vue.js component, I am utilizing the "name" props obtained from the parent component. My goal is to establish a two-way communication between the parent and child components using this props. The parent component code looks like this: <script ...

A step-by-step guide on showcasing Flickr images through API using a Justified Gallery

I am looking to integrate the Miromannino Justified Gallery () into my project, but I want it to showcase images fetched from Flickr. I have successfully implemented the code to retrieve photos from Flickr using the API through Ajax: $.ajax({ url ...

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

Setting up various connections is made possible through Node.js Socket.io

In the process of developing a straightforward chat application using socket.io and incorporating passport.js for user authentication, an issue arises when users log out and then back in. The previous socket connection remains active, resulting in two conn ...