axios 在 API vuejs 中获取 id答案

【问题标题】：Axios get id inside the API vuejsaxios 在 API vuejs 中获取 id
【发布时间】：2021-04-11 03:38:40
【问题描述】：

当我在 API 链接中调用 Id 返回空值时，谁能帮我获取 API 中的 id？

这是我的完整组件

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>

这个想法是在选择 (org) 时，它会在新选择中返回所选组织的嵌套组织 ** 当使用像这样"/org/"+this.org_id 这样的 API 的 ID 时，它会成功返回 id 我将不胜感激。

【问题讨论】：

欢迎来到 SO .. this.org_id 到 this.orgs.id 试试这个 .get("/org/" + this.org.id + "/parentorg",
它返回 404 not found Failed to load resource: the 127.0.0.1:8000/api/org/undefined/parentorg:1 server responded with a status of 404 (Not Found) @kamlesh-paul
两个axios功能相同？
是的，在mounted(){}中。

标签： javascript laravel api vue.js axios

【解决方案1】：

试试这个

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);
        });
},

这里你需要等待获取 org 然后你可以用 org 调用 next axios

更新

您不能在 mount 中使用该功能，因为当时您的选择为空

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

【讨论】：