Vue3 - build API url and fetch data after route changed

Question

I am trying to display the borders of a country from restcountries api (https://restcountries.eu/) as clickable buttons.

this is how I try to build the url for the 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)

the problem is, that the details array is empty at that moment. When I reload the page, the data is fetched correctly.

I tried to:

use beforeMount()
use a isFetching boolean
get the data with @click-function
tried is with these function in mounted():

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

this is my data:

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

this is the relevant html snipped to display the 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>

thanks for helping!

Nikola Pavicevic · Accepted Answer · 2021-09-11 15:25:22Z

1

Try to wait for responses:

methods: {
  async getBorders() {
    await axios
      .get(this.urlDetail)
      .then((response) => (this.details = response.data[0]));
  },

  setBorders() {
    this.borders = this.details.borders.join(";");
    this.urlBorders =
      "https://restcountries.eu/rest/v2/alpha?codes=" + this.borders;
  },

  async getDets() {
    await axios
      .get(this.urlBorders)
      .then((response) => (this.bordersData = response.data));
    },
  },
},

async mounted() {
  await this.getBorders();
  this.setBorders();
  await this.getDets();
},

edited Sep 11, 2021 at 15:25

answered Sep 9, 2021 at 15:22

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Goldsucher Over a year ago

thanks that did the trick! just one little note if someone uses this solution: in the getDets method it should be: .then((response) => (this.bordersData = response.data)); (.data was missing) to work properly

Collectives™ on Stack Overflow

Vue3 - build API url and fetch data after route changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related