How to pass selected value of dropdown to @input?



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



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


Log in to reply