javascript - Axios get id inside the API vuejs

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>

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>