I am currently working on a project where I need to display the borders of a country using the restcountries API. To achieve this, I want to create clickable buttons that will navigate the user to specific border countries.
Here is snippet of my code where I attempt to construct the API URL:
mounted() {
axios
.get(this.urlDetail)
.then(response => (
this.details = response.data[0]
))
this.borders = this.details.borders.join(";");
this.urlBorders = "https://restcountries.eu/rest/v2/alpha?codes=" + this.borders;
fetch(this.urlBorders)
.then(res => res.json())
.then(data => this.bordersData = data)
However, I am facing an issue as the details array is empty when trying to fetch the data. Strangely, refreshing the page resolves the problem and retrieves the data correctly.
Several attempts have been made to resolve this including utilizing beforeMount(), setting a boolean variable for isFetching, fetching the data with an @click-function, and executing these functions within mounted():
document.onreadystatechange = () => {
if (document.readyState == "complete") {
console.log('Page completed with image and files!')
}
}
Below is the structure of my data:
data() {
return {
isFetching: true,
urlDetail: 'https://restcountries.eu/rest/v2/name/' + this.$route.params.countryName,
details: [],
borders: "",
urlBorders: "",
bordersData: []
}
Additionally, here is the relevant HTML section responsible for displaying the clickable buttons:
<p><strong>Border Countries:</strong><button class="border-button" v-for="border in bordersData"><router-link :to="{ name: 'border', params: {borderName: border.name}}">{{ border.name }}</router-link></button></p>
Thank you for any assistance you can provide!