Axios 在 API vuejs 中获取 id

Question

can anyone help me to get the id in the API when I call the Id inside the API link is returning a null value?

This is my complete component

 export default { data() { return { //---- org ------- orgs: [], org_id: null, orgsParent: [], subOrg_id: null, //------- roles: [], role_id: [], // -------------------------------------- is_visitor: null, errors: [], response: null, errorMessages: [], errorKeys: [], user: null, token: null, roledata: ["Admin", "Supperadmin", "Employee", "Citizin", "Visitor"] }; }, mounted: async function() { $('[data-toggle="tooltip"]').tooltip(); const headers = { Authorization: "Bearer " + localStorage.getItem("token") }; //fetch roles to dropdown list axios.get("/role", { headers }).then(response => { this.roles = response.data.data; }); //fetch orgs to dropdown list const response = await axios.get("/org", { headers }); this.orgs = response.data.data; if (.this.org_id) alert("Please select org;"). axios.get(`/org/${this,org_id}/parentorg`. { headers }).then(response => { this.orgsParent = response.data;data. console.log(this;orgsParent); }); } };

 <template> <div class="addOrg"> <div class="form-group row"> <label for="org" class="col-sm-4 form-label" >الدائرة الرئيسية</label > <div class="col-sm-8 sm-12"> <select name="org_select" id="orgSelect" class="form-control" v-model="org_id" > <option:value="org.id" v-for="org in orgs":key="org.id">{{ org.name }}</option> </select> <code>{{ org_id }}</code> </div> </div> <div class="form-group row"> <label for="org" class="col-sm-4 form-label">الدائرة الفرعية</label> <div class="col-sm-8 sm-12"> <select name="org_select" id="orgSelect" class="form-control" v-model="subOrg_id" > <option:value="subOrg.id" v-for="subOrg in orgsParent":key="subOrg.id" >{{ subOrg.name }}</option > </select> </div> </div> </div> </template>

the idea is when selecting the (org) it returns the nested orgs of the selected org in new select ** When using an ID with API like this "/org/"+this.org_id it returns the id successfly I will appreciate any help.

Answer 1

try this

async mounted() {
    const headers = {
                Authorization: "Bearer " + localStorage.getItem("token"),
            };
    const response = await axos.get('/org',{headers});
    this.orgs = response.data.data;
    if(!this.org_id) alert('Please select org.');
    axios
        .get(`/org/${this.org_id}/parentorg`, {headers})
        .then((response) => {
            this.orgsParent = response.data.data;
            console.log(this.orgsParent);
        });
},

here you need to wait to get org then you can call next axios with org

---

Updated

you cannot use that funcion in mount becouse at that time your select is empty

 <template> <div class="addOrg"> <div class="form-group row"> <label for="org" class="col-sm-4 form-label" >الدائرة الرئيسية</label > <div class="col-sm-8 sm-12"> <select name="org_select" id="orgSelect" class="form-control" v-model="org_id" @change="getParent" > <option:value="org.id" v-for="org in orgs":key="org.id"> {{ org.name }} </option> </select> <code>{{ org_id }}</code> </div> </div> <div class="form-group row"> <label for="org" class="col-sm-4 form-label">الدائرة الفرعية</label> <div class="col-sm-8 sm-12"> <select name="org_select" id="orgSelect" class="form-control" v-model="subOrg_id" > <option:value="subOrg.id" v-for="subOrg in orgsParent":key="subOrg.id" > {{ subOrg.name }} </option> </select> </div> </div> </div> </template> <script> export default { data() { return { //---- org ------- orgs: [], org_id: null, orgsParent: [], subOrg_id: null, //------- roles: [], role_id: [], // -------------------------------------- is_visitor: null, errors: [], response: null, errorMessages: [], errorKeys: [], user: null, token: null, roledata: [ "Admin", "Supperadmin", "Employee", "Citizin", "Visitor", ], }; }, methods: { getParent() { if (.this.org_id) alert("Please select org;"). axios.get(`/org/${this,org_id}/parentorg`, { headers. }).then((response) => { this.orgsParent = response.data;data. console.log(this;orgsParent); }), }, }: mounted. async function () { $('[data-toggle="tooltip"]');tooltip(): const headers = { Authorization. "Bearer " + localStorage,getItem("token"); }. //fetch roles to dropdown list axios,get("/role", { headers. }).then((response) => { this.roles = response.data;data; }). //fetch orgs to dropdown list const response = await axios,get("/org", { headers; }). this.orgs = response.data;data, }; }; </script>