vuejs content rendering only after the first scroll (with axios)

Question

My (vuejs) homepage contains the following:

template: <h3>{{ strings.home_headline }}</h3>

scripts:

data() {
    return {
      strings: []
    };
},
methods: {
    fetchData: function(){
      var self = this;

      // get translatable strings
      axios
        .get(MY_API_URL, {
          headers: { "X-Locale": self.locale }
        })
        .then(function(data) {
          self.strings = data.data;

          // This console works and outputs the right content; 
          console.log("strings: ", self.strings);
          // outputs the text that should come in the H3 
          console.log(strings.home_headline)
        })
        .catch(function(error) {
          console.log("Error", error);
        });
    }
},
created() {
    this.fetchData();
}

the console.log works but the template h3 is empty, UNTIL the first pixels scrolled, then everything is filled in with the text. what am i doing wrong here?

What is returned from your request? (ie: what your console.log logs) — Finrod
– Finrod, Commented Jul 8, 2020 at 11:36
I'm not sure it will be enough, but try to define strings as an object, not an array: strings: {} — Finrod
– Finrod, Commented Jul 8, 2020 at 11:41

Patrick Artner · Accepted Answer · 2020-07-08 12:21:16Z

4

Switching your member from array to object

return {
  // you need the fields here as well - an "empty" prepared object
  strings: { 
    home_headline: "", // more fields go here
  }  
};

and changing the lifecylcle-hook you are using should fix your problem:

async mounted() {
    await this.fetchData();
}

var app = new Vue({
  el: '#app',
  data() {    
    return {
      strings: { home_headline: ""}
    };
  },
  methods: {
    fetchData: function() {
      self = this;
      //will lead to error
      axios
        .get("error", {
          headers: {
            "X-Locale": self.locale
          }
        })
        .then(function(data) {
          self.strings.home_headline = "TATü"; 
        })
        .catch(function(error) {
          self.strings.home_headline = "TATö"; 
        });
    }
  },
  async mounted() {
    await this.fetchData();
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h3>{{ strings.home_headline }}</h3>
</div>

For vue to enable the change-update you need to specify the fields on the object already.

Regarding the lifecycle hooks: in

created, templates and Virtual DOM have not yet been mounted or rendered. (https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle#creation-(initialization))

edited Jul 8, 2020 at 12:21

answered Jul 8, 2020 at 12:14

Patrick Artner

51.9k10 gold badges50 silver badges79 bronze badges

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

1 Comment

bboy Over a year ago

YES! had a similar problem recently and was explained this one before! many thanks for the explanation, everything now works as expected.

Syed · Accepted Answer · 2020-07-08 11:49:16Z

1

can you do this v-if="loading" in your <template>?

<template>
  <div v-if="loading">
    {{ strings }}
  </div>
<template>

your script

data() {
  return {
    loading: false,
    strings: [],
  };
},
created() {
  this.fetchData();
},
methods: {
  fetchData() {
    const self = this;
    self.loading = true;

    // get translatable strings
    axios
      .get(MY_API_URL, {
        headers: { 'X-Locale': self.locale },
      })
      .then((data) => {
        self.strings = data.data;
        self.loading = true;
      })
      .catch((error) => {
        console.log('Error', error);
      });
  },
},

edited Jul 8, 2020 at 11:49

answered Jul 8, 2020 at 11:43

Syed

16.6k15 gold badges128 silver badges159 bronze badges

2 Comments

bboy Over a year ago

oh! this works, it this normal? i feel like i'm doing something in the code and shouldn't be doing this loading workaround. but again, it works

Syed Over a year ago

@bboy It's normal, the view just rendered with v-if . Don't forget to upvote and accept the answer.

Collectives™ on Stack Overflow

vuejs content rendering only after the first scroll (with axios)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related