axios 在 API vuejs 中获取 id

Posted 2023-02-22

【中文标题】axios 在 API vuejs 中获取 id

【英文标题】：Axios get id inside the API vuejs

【发布时间】：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()中。

【参考方案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>