Axios在API vuejs中获取id

Question

当我调用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>

这个想法是，当选择(组织(时，它会在new select中返回所选组织的嵌套组织**当将ID与API一起使用时，如"/org/"+this.org_id，它将返回ID successfly我将感谢任何帮助。

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

在这里，你需要等待获得组织，然后你可以用组织呼叫下一个axios

---

更新

您不能在装载中使用该函数，因为此时您的选择为空

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