Loading component after fetch in vuejs

Question

I'm trying to consume an API using axios.

This is my code until now:

<select>
    <option v-for="value in values"> value.name </option>
</select>

   // js
   data(){
        values: [],
   },
   created() {
        this.getData();
   },

   methods: {
       getData: () => {
          axios.get('url')
          .then(res => {
              this.value = res.data.dados;
              console.log(res.data.dados);
          })
          .catch(error => {
               console.log(error);
          });
   }
}

The promise's console.log is working normally, but the options with data isn't rendered. It's probably because my select component is being rendered before the 'getData()'. How can I fix it?

João Victor · Accepted Answer · 2020-03-08 04:22:27Z

2

Just put a loading handler.

<select v-if="loaded">
  <option v-for="value in values"> value.name </option>
</select>

   // js
   data(){
        values: [],
        loaded: false,
   },
   created() {
        this.getData();
   },

   methods: {
       getData: () => {
          axios.get('url')
          .then(res => {
              this.value = res.data.dados;
              this.loaded = true;
          })
          .catch(error => {
               console.log(error);
               this.loaded = true;
          });
   }
}

answered Mar 8, 2020 at 4:22

João Victor

6396 silver badges21 bronze badges

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

Comments

Rodrigo Pauletti · Accepted Answer · 2021-10-19 14:15:21Z

1

You've a typo on this.value, it should be this.values. If that doesn't work, use this.$forceUpdate() to force re-render component

<select>
    <option v-for="value in values">{{ value.name }}</option>
</select>

   // js
   data(){
        values: [],
   },
   created() {
        this.getData();
   },

   methods: {
       getData: () => {
          axios.get('url')
          .then(res => {
              this.values = res.data.dados; // change value to values
              console.log(res.data.dados);
              this.$forceUpdate(); // add forceUpdate
          })
          .catch(error => {
               console.log(error);
          });
   }
}

edited Oct 19, 2021 at 14:15

Rodrigo Pauletti

8922 gold badges11 silver badges13 bronze badges

answered Mar 8, 2020 at 1:20

I Gusti Ngurah Arya Bawanta

746 bronze badges

3 Comments

Gabriel Arruda Over a year ago

It was not the typo. Now, it says "TypeError: _this.$forceUpdate is not a function at eval (Pesquisa.vue?cddd:49)"

I Gusti Ngurah Arya Bawanta Over a year ago

have you try change the this.value to this.values ?

I Gusti Ngurah Arya Bawanta Over a year ago

oh the forceUpdate error because the function called upon created, you can change it to mounted

Collectives™ on Stack Overflow

Loading component after fetch in vuejs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related