Estoy tratando de mostrar las fronteras de un país desde la API de restcountries ( https://restcountries.eu/ ) como botones en los que se puede hacer clic.

así es como trato de construir la url para la API

 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)

el problema es que la matriz de detalles está vacía en ese momento. Cuando vuelvo a cargar la página, los datos se obtienen correctamente.

Lo intenté:

• usar beforeMount()
• use un booleano isFetching
• obtener los datos con @click-function
• probado es con estas funciones en mount():

 document.onreadystatechange = () => { if (document.readyState == "complete") { console.log('Page completed with image and files!') } }

estos son mis datos:

 data() { return { isFetching: true, urlDetail: 'https://restcountries.eu/rest/v2/name/' + this.$route.params.countryName, details: [], borders: "", urlBorders: "", bordersData: [] }

este es el html relevante cortado para mostrar los botones:

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

¡gracias por ayudar!