Hiding vue.js template before it is rendered

Question

I am trying to hide the vue.js template\'s contents before it is fully rendered. Consider following template:

Answer 1

I would hesitate to mix jQuery in Vue.js code for the reason that Vue.js provides a suite of tools that generally eliminate the need for jQuery.

Since you are loading the page and displaying a progress bar, you can take advantage of the Vue.js lifecycle hooks: [created, mounted, beforeUpdate, updated, etc. etc.].

What I would do is to create a small div containing the progress bar, and then an adjacent element with the actual content to display after load. Set a data on the component instance, and then use the lifecycle hooks to toggle the display.

  

  
  



  

  
    

      
{{log.timestamp}}
      
{{log.event}}
    

  

Then in the script part of the template:

export default {
  data() {
    return: {
      loading: true,
      logs: [],
      message: ''
    };
  },
  methods: {
    fetchLogs() {
      // using vue-resource / ajax library like axios
      this.$http.get('/api/logs').then((logs) => {
        if (logs) {
          this.logs = logs;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        } else {
          this.message = 'No logs to display';
          this.loading = false;
        }
      });
    }
  },
  mounted() {
    this.fetchLogs();
  }
};

Using this method, you can also bind classes to the elements to create smooth CSS transitions.