q-select using filter, implements action, use change



  • 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?



  • 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



  • Thanks i can resolve with this example


Log in to reply