How to pass selected value of dropdown to @input?

radhika248

I want to pass the selected value of dropdown to @input=“call_state_data”.I took <q-select> and wrote @input to that <q-select> ,now want to pass the selected value of dropdown to @input.

<q-select
          outlined
          v-model="country"
          :options="options"
          :option-value="opt => opt.id"
          :option-label="opt => opt.name"
          emit-value
          map-options
          @input="call_state_data"
          fill-input
          use-input
          @filter="filterFn"
          style="max-width: 300px"
          :rules="[val => !!val || 'Field is required']"
        ></q-select>

In that function i have called Api and to that api i have to pass the id of selected value of dropdown.
This is my function:

call_state_data(){
        console.log('state_data')
     
        this.$axios.get('http://127.0.0.1:8000/api/get-state?country_id='+)
                .then((response) => {
                  console.log(response)

                  for(var i=0; i<response.data.length; i++)
                  {
                    this.state_data.push({name:response.data[i].state_name,id:response.data[i].state_id});
                  }
                  console.log(this.state_data)
                })
   },

How to pass the selected value to the function call_state_data?

metalsadman

@radhika248 from docs

@input -> function(value)
Description: Emitted when the component needs to change the model; Is also used by v-model

so your handler would look something like:

 call_state_data(value) { 
   /*do something with value*/
   .... 
 }

you should check api cards -> events section of the docs. https://quasar.dev/vue-components/select#QSelect-API