How to query between multiple APIs with VueJS? - vuejs2

Question

I need some help on how to approach the logic for my single page app with VueJS. This is difficult for me to explain, so I hope I can do my best:
I have a template/component with one API GET request via Axios like so:
Component named "Similar Entities"
<template>
<div v-if='gde.length > 0'>
<h4>Similar Entitie(s)</h4>
<ul>
<li v-for='item in gde'>
<a href='#'>{{item['Similar Entities']}}</a>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
import api from '#/api.js';
export default {
name: 'SimilarEntities',
data: function() {
return {
gde: []
};
},
created: function() {
axios
.get(api.getSimilarEntities + this.$route.params.ID)
.catch(error => {
console.log(error);
})
.then(response => {
this.gde = response.data;
});
}
};
</script>
The above template returns HTML with a bullet list like so:
Building
Hardened Aircraft Shelter
(and the gde object looks like this)
[
{
"ID":100,
"Name":"Aircraft Hangar",
"Similar Entities":"Building"
},
{
"ID":100,
"Name":"Aircraft Hangar",
"Similar Entities":"Hardened Aircraft Shelter"
}
]
The above 'Similar Entities' component is part of a larger template (which is part of a larger template!) which uses another Axios.get request to populate a product details page like so:
Component named 'Appearance'
<template>
<div>
<div>
<p>INfo about this product</p>
<ul>
<li v-for='item in ga'></li>
</ul>
<similar-entities></similar-entities>
</div>
</div>
</template>
<script>
import axios from 'axios';
import api from '#/api.js';
import SimilarEntities from '#/components/SimilarEntities.vue';
export default {
name: 'Appearance',
components: {
SimilarEntities
},
data: function() {
return {
ga: []
};
},
created: function() {
axios
.get(api.getAppearance + this.$route.params.ID)
.catch(error => {
console.log(error);
})
.then(response => {
this.ga = response.data;
});
}
};
</script>
The above 'Appearance' template returns HTML like so:
Appearance
An aircraft hangar is a place where aircraft are stored....blah blah blah
- Building
- Hardened Aircraft Shelter
Overall, the $route.params object for the single page component with router info is like so:
{
"ID":100,
"Name":"Aircraft Hangar"
}
The problem is I can't figure out how to hyperlink the Similar Entities items in the Similar Entities component (in this case, Building and Hardened Aircraft Shelter) to their respective product details page because they do not contain their associated IDs.
Note: There is an endpoint available that I can use called getNames which contains the product names for all of the products (including the name of our Building and Hardened Aircraft Shelter products) that contains the following data:
{
"ID":100,
"Name":"Aircraft Hangar"
},
{
"ID": 101,
"Name": "Building"
},
{
"ID": 102,
"Name": "Carport"
}
...snip
Should I put the getNames api in some kind of global state? Then with the $route.params object I can grab the key named Name and then somehow look at the global state of the getNames object and dynamically bind the Name to the hyperlink element of the Similar Entities component? This way, the Building and Hardened Aircraft Shelter links in the Similar Entities component gets linked ? All I am trying to do is get the user to the correct product page when they click on a Similar Entities link (in this demo, it's Building or Hardened Aircraft Shelter).
Thanks for any tips. I am probably overthinking this....