Utilize the filtering feature within the Vue select module

I'm struggling to get the select filter to work properly in my Quasar application. When I open the select, there is no list displayed and no value gets selected. Can someone help me understand why it's not working?

      <q-select
        v-model="model"
        use-input
        :options="regionsOptions"
        @filter="filterFn"
      >
      </q-select>


export default {
   
  data() {
    return {
      model: '',
      regions: [
      {
        "label": "Help",
        "value": "help",
        "lat": 57.6215477,
        "lon": 39.8977411
      },
      {
        "label": "Hello",
        "value": "hello",
        "lat": 57.6215477,
        "lon": 39.8977411
      }
     ],
      regionsOptions: [],
    }
  },
   

  methods: {
    filterFn(val) {
        const needle = val.toLowerCase()
        this.regionsOption = this.regions.filter((v) => v.value.toLowerCase().indexOf(needle) > -1)
    },
  
  }
}
</script>

Answer №1

Check out this code snippet:

const application = Vue.createApp({
  data: () => ({
    model: '',
    regions: [{"label": "Help", "value": "help", "lat": 57.6215477, "lon": 39.8977411}, {"label": "Hello", "value": "hello", "lat": 57.6215477, "lon": 39.8977411}],
    regionsOptions: []
  }),
  methods: {
    filterFunction (val, update) {
      if (!val) {
        update(() => {
          this.regionsOptions = this.regions
        })
        return
      }
      update(() => {
        const needle = val.toLowerCase()
        this.regionsOptions = this.regions.filter(v => v.value.toLowerCase().indexOf(needle) > -1)
      })
    }
  }
})
application.use(Quasar)
application.mount('#q-app')
<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="e1909480928093a1d3cfd4cfd4">[email protected]</a>/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <q-select
    v-model="model"
    :options="regionsOptions"
    use-input
    @filter="filterFunction"
  >
    <template v-slot:option="scope">
      <q-item v-bind="scope.itemProps">
        <q-item-section>
          <q-item-label>{{ scope.opt.label }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9d8dcc8dac8dbe99b877c887c">[email protected]</a>/dist/quasar.umd.prod.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

How to select an unwrapped element using the v-popover component

The v-popover component is commonly used by wrapping an element inside of it, like so: <v-popover offset="0" placement="right"> <span>My awesome span</span> <template slot="popover">My awesome popov ...

Obtain a controller's reference from a callback by utilizing TypeScript

Implementing a simple controller that utilizes a directive/component and passes a function as binding. However, when the function is called, there is no reference available to access any of the controller class services. Within the "public onTileClicked" ...

Tips for accessing req.fields variables while utilizing Express-Formidable

For some reason, I am encountering difficulties when trying to access variables parsed within req.fields using Express-Formidable. Upon executing a console.log() of req.fields, the output is as follows: { 'registration[username]': '1', ...

Executing all middleware within an express route

Currently, I am in the process of constructing an API using express and have implemented multiple middleware functions in my routes. One of the endpoints I am working on is displayed below: Router.route('/:id/documents') .get([isAuthenticated, ...

Tips for designing a three-dimensional egg shape using Three.js?

I'm looking to create a unique egg shape using Three.js, but I seem to be missing the correct equation. Below is the code I currently have, utilizing LatheGeometry. Can anyone provide some guidance? var r0 = 40 var r1 = r0/4; var inc = Math.PI/r0; po ...

Vue.js components not being displayed by data() function

When I display data on the page, the console in Vue's data() function shows it properly. See the screenshot below for reference: https://i.stack.imgur.com/sdBwn.png However, when I try to filter the data using the same page and data(), it does not sh ...

Exploring the latest updates in MUI modern version

The MUI documentation suggests using a modern folder with components designed for modern browsers. Is there a way to configure webpack to automatically rewrite imports like import {Box} from "@mui/material" to use the modern version without manually changi ...

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

What are some ways to improve performance in JavaScript?

Can you help me determine which approach would be more efficient - using native functions of the language that involve 2 iterations or a simple for loop? The goal is to locate the index in an array of objects where the property filterId matches a specific ...

Emulate sequelize using Jest in combination with sequelize-mock

In my latest project, I have been implementing TDD as the primary methodology along with integration tests. One of the tasks at hand is to retrieve all users from the database. //controller.js const UserService = require('../services/user'); mod ...

Is there a way to use JavaScript or jQuery to identify if Firefox is blocking mixed content

Is there a way to detect when Firefox (or any browser) is blocking mixed content using JavaScript or jQuery? To learn more about Firefox's mixed content blocking feature, visit: The backstory: My company has an external vendor that handles the onli ...

javascript unable to delete cookie

After conducting extensive research across various articles and links on deleting cookies using JavaScript, I have encountered an issue where the JavaScript code does not seem to be functioning as expected. The code I utilized for setting cookie values usi ...

Sequentially animate objects with a fade-out and fade-in effect

Attempting to achieve a fade-out, fade-in animation using JavaScript and CSS. Here is the CSS animation code: @keyframes fade-in{ 0%{ opacity: 0%; } 100%{ opacity: 100%; } } @keyframes fade-out{ 0%{ opacity: 100%; } 100%{ opacity: 0%; } } Impleme ...

Sending data from an AngularJS app to Google App Engine using HTTP post

I'm facing a small issue where I am unable to successfully POST my data (comments) to the GAE datastore using angularjs. Can you please help me identify what's wrong with the following angularjs "post" or html code? ANGULAR: $scope.addComment = ...

Utilizing VUETIFY DataTable: Implementing v-if in table header to conceal specific columns from users

I need to restrict access to the action for non-admin users. To accomplish this, I'm utilizing a data-table. Below is the code snippet I'm using: <v-data-table dense :headers="stampedDocumentsHeaders" :items="filterCutOffA ...

Unable to retrieve jwt token from cookies

Currently, I am developing a website using the MERN stack and implementing JWT for authentication. My goal is to store JWT tokens in cookies. Despite invoking the res.cookie function with specified parameters (refer to the code below), I am facing difficul ...

managing promises within Vuetify data table components

Encountering an issue while attempting to integrate the response from an API call (using axios) into a Vue data table. Manually constructing an HTML table like so: <table style="width:100%"> <tr> <th v-for="(item ...

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

Manipulating the DOM in AngularJS Directives without relying on jQuery's help

Let's dive right in. Imagine this as my specific instruction: appDirectives.directive('myDirective', function () { return{ restrict: 'A', templateUrl: 'directives/template.html', link: functio ...

All the details from this run are available in the npm run dev log on Ubuntu

Good day! I've been working on deploying a page built in vue.js, and after uploading all the files successfully, I encountered an issue when trying to run "npm run dev." No matter what I try, including re-installing npm dependencies and starting from ...