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>

CodePudding user response：

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/[email protected]/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/[email protected]/dist/quasar.umd.prod.js"></script>