Tell me how to make the filter in the select work
When opening a select, there is no list and no value is selected
I use Quasar but I don’t understand why it doesn’t work
<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>
>Solution :
Try like following snippet:
const app = 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: {
filterFn (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)
})
}
}
})
app.use(Quasar)
app.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/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
<q-select
v-model="model"
:options="regionsOptions"
use-input
@filter="filterFn"
>
<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/quasar@2.5.5/dist/quasar.umd.prod.js"></script>