In latest version of quasar, main.js file is not there.Where i have set the axios headers.

I wanted to pass the jwt token to the axios get request,here is my store file where i wrote action to set the token using localstorage :

const actions = {
  tokenlogin({}, payload) 
	{
		console.log('*auth_login*')
		console.log('payload:', payload)
		axios.post('http://127.0.0.1:8000/api/token', payload)
		.then((response) => {
				console.log(response.data);
				console.log(response.data.access)
                 
    if(response.data.access)
    {
        localStorage.setItem('token', response.data.access)
        this.$router.push({path: '/dashboard'})
    }
      else
      {
        console.log('**** else part ***')
        this.show=true;
        // this.alert1 = true;

      }
        },
          error => {
            console.log('********* error *********');
            console.log(error)
        });
      },
}

And this is the page where i got that tokeand i have to pass this token to the axios get request :

data(){
        var token1=localStorage.getItem('token')
        console.log(token1)
       
        if ( token1 == null )
        { 
            this.$router.push({path: '/'})
        }
        else
        {
            var page = 1;
            
            var baseurl='http://127.0.0.1:8000/api/'
            this.$axios.get(baseurl+'hospitalget/?page='+page)
               .then((response) => {
               console.log(response)
                page++;
                console.log(page)
               for(var i=0; i<response.data.results.length;i++)
               {
                  this.hospital_data.push({id:response.data.results[i].hospital_id,name:response.data.results[i].hospital_name,address:response.data.results[i].hospital_address});
               }
               console.log(this.hospital_data)
                  
               })
        }


        return{
           token1,
           data:[],
           username:'',
           hospital_data:[],
           id:'',
           name:'',
           address:'',
           hospital_name:'',
           showEditTask: false,
           page:1,
         }
    },

How can i append the jwt token to request?

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?

Thank you @chyde90 .It work’s

I called api in created() hook now.

I am trying to add the component dynamically,while adding component I got error :“TypeError: Cannot read property ‘id’ of null”
TypeError: Cannot read property ‘id’ of null

<template>
<div v-for="(line, index) in lines" v-bind:key="index" class="row">
        <div class="row">  
          <div class="col-6">
              <q-select
              outlined
              v-model="line.disease"
              :options="disease_data"   //Data fetched from API
              :option-value="opt => opt.id"
              :option-label="opt => opt.name"
              emit-value
              map-options
              style="max-width: 300px"
              />
          </div>
          <div class="col-md-6">
            <div>
              <q-btn @click="removeLine(index)" icon="delete" round />
              <q-btn v-if="index + 1 === lines.length" @click="addLine" icon="playlist-plus" round />
            </div>
          </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        var token1=localStorage.getItem('token')
        console.log(token1)

        if ( token1 == null )
        { 
            this.$router.push({path: '/'})
        }
        else
        {
              var baseurl='http://127.0.0.1:8000/api/'
              this.$axios.get(baseurl+'patientget',+token1)
                .then((response) => {
                  console.log(response)
            
                  for(var i=0; i<response.data.length; i++)
                  {
                    this.patient_data.push({name:response.data[i].patient_firstname,id:response.data[i].patient_id});
                  }
                  console.log(this.patient_data)
                })


                this.$axios.get(baseurl+'diseaseget',+token1)
                .then((response) => {
                  console.log(response)
            
                  for(var i=0; i<response.data.length; i++)
                  {
                    this.disease_data.push({name:response.data[i].diseases_name,id:response.data[i].diseases_id});
                  }
                  console.log(this.disease_data)
                })
        }
        return{
            id:'',
            height:'',
            patient:'',
            weigth:'',
            fees:'',
            disease:'',
            lines: [],
            data:[],
            patient_data:[],
            disease_data:[],
       
            name:'',
        }
    },
  watch: {
    lines () {
      this.blockRemoval = this.lines.length <= 1
    }
  },
  methods: {
    addLine () {
      let checkEmptyLines = this.lines.filter(line => line.disease === null)
      if (checkEmptyLines.length >= 1 && this.lines.length > 0) return
      this.lines.push({
        
        disease: null,
        
      })
    },
    removeLine (lineId) {
      if (!this.blockRemoval) this.lines.splice(lineId, 1)
    }
  },
  mounted () {
    this.addLine()
  }
}
</script>

Check out the given repo link:
https://github.com/radhika248/QuasarCRUD

I assign v-model=data.country to the <q-select> but it takes only the selected value i am not able to edit it

Thank you for responding.
Sorry,as i am new to this, from next time i will send the code blocks in proper backticks.I read about vue lifecycle hooks but i am not able to find the solution on it.

While editing a particular form record, the data which is already stored in the form is not displaying in the particular dropdown, as I have to edit/update it again by selecting the dropdown option. I am saving a form through an API.

/Code/
<q-select
outlined
v-model=“country”
:options=“country_data”
:option-value=“opt => opt.id”
:option-label=“opt => opt.name”
emit-value
map-options
style=“max-width: 300px”
></q-select>

/Call through API/
onSubmit(){
console.log(‘submit’)
// this.country = data.country
var postdata = {
hospital_name:this.data.hospital_name,
hospital_address:this.data.hospital_address,
hospital_contact_no:this.data.hospital_contact_no,
hospital_website:this.data.hospital_website,
hospital_email_id:this.data.hospital_email_id,
country:this.data.country,
state:this.data.state,
district:this.data.district,
city:this.data.city,
village:this.data.village,
};

    console.log(this.data.country)
    // this.$refs.desc_ma.validate()

    this.$axios.put('http://127.0.0.1:8000/api/hospitalupdate/'+this.$route.params.id,postdata)
    .then((response) => {
        console.log(response);
        console.log(response.config.data, '****----');
        console.log(response.status);
    })
 },

/Code for fetching the value from API to dropdown/
var baseurl=‘http://127.0.0.1:8000/api/’
this.$axios.get(baseurl+‘get-country’,+token1)
.then((response) => {
console.log(response)

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

Thank you.And the issue i was facing is now solved

0:
id: 1
name: “India”
I got id as 1 and name as India.

There is a data fetched by API

<q-select
outlined
v-model=“country”
:options=“country_data”
:option-value=“opt => opt.id”
:option-label=“opt => opt.name”
emit-value
map-options
fill-input
use-input
@filter=“filterFn”
style=“max-width: 300px”
:rules="[val => !!val || ‘Field is required’]"
></q-select>
I have used this function:
filterFn (val, update, abort) {
update(() => {
const needle = val.toLowerCase()
this.options = this.country_data.filter(v => v.toLowerCase().indexOf(needle) > -1)
})
}
[Vue warn]: Error in v-on handler: “TypeError: v.toLowerCase is not a function”
TypeError: v.toLowerCase is not a function