[Vuejs]-VueJs cant access items outside of my created hook

by

1👍

✅

I wanted to share some sample code that might be helpful, since it looks like you’re trying to do DOM manipulation based on when the data is ready. Hopefully it’s helpful. This is a bit of an example of the comment “Are you sure you need to avoid having the component created v.s. just hiding the template of the component until the data is loaded?”

var app = new Vue({
  el: "#app",
  data() {
    this.fakeAxiosCall()
      .then((theData) => (this.data = theData))
      .finally(() => (this.loading = false));
    return {
      data: "",
      loading: true
    };
  },
  methods: {
    fakeAxiosCall: function() {
      return new Promise((resolve) => {
         setTimeout(() => resolve("hello Vue"), 2000);
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="loading">Loading...</div>
  <div v-if="!loading">Data was loaded: "{{data}}"</div>
</div>
👤AlexMA

Leave a comment