q-select using filter, implements action, use change

oo00Kuma00oo

hellow, i am verry new using quasar and i need help.
i try to use q-select to generate filter envent and search data using actions, this is not my problem i need to filter result an get id value not string value my example```

my q-select

<q-select            
                  v-model="clientRegister.search"
                  use-input
                  hide-selected
                  fill-input
                  :options="options"
                  option-value="iClientId"
                  option-label="vName"                                   
                 @filter="filterFn"                 
                  color="green-5"
                  :hint="$t('placeholder.PLACEHOLDER_SEARCH_CLIENT')"
                  style="width: 300px; padding-bottom: 32px"
                  @change.native="onChange($event)"
                  >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-grey">
                        {{$t('placeholder.PLACEHOLDER_DATA_NOT_FOUND')}}
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>

My script

import {mapActions} from "vuex";
export default {
   name: 'RegisterClientComponent',
  data () {
      return {
        model: null,
        options: [],
        data:{},
        clientRegister:{
          search:null,
        }
      }
    },
    methods: {
      ...mapActions("Clients",["searchClient"]),
     async filterFn (val, update, abort) {        
       if(val.length >2){
         this.data=await this.searchClient({word:val});
         this.options=this.data.data;       
       }       
         update(() => {
          
          const needle =  val.toString().toLowerCase();          
          this.options = this.options.filter(v => v.vName.toString().toLowerCase().indexOf(needle) > -1)
        })
      },
      onChange(event){
        console.log(event.target.value);
        console.log(this.clientRegister.search);
      }
    }
}

my action

export function searchClient(context){
    //return ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'];
    return Vue.prototype.$axios.post("Search-clients.html");
}

this code work good, the problem is i need iClientId and on the change event i get vName

the question is:
is it posible to get id? how?

s.molinari

Not sure completely what’s going wrong or why with your code, but if you want just a part of the object returned by the select, you can do something like this.

https://codepen.io/smolinari/pen/MWgZEYJ?editors=1010

Note: I’m using the category property instead of an id, but it could be the id or any other property for that matter.

Scott

oo00Kuma00oo

Thanks i can resolve with this example

No More Posting New Topics!

q-select using filter, implements action, use change