[Vuejs]-How to check view rendered after get data from API Vue JS

by

1👍

✅

Here is an example of using $nextTick() in Vue.

If you use window.print() directly, without $nextTick() then you will not get the list of posts in your print, since it takes time to update the DOM.

const { createApp, ref } = Vue 

const App = {
  data() {
    return { 
      posts: [] 
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
          fetch('https://jsonplaceholder.typicode.com/posts')
              .then((response) => response.json())
              .then((data) => 
              {
                this.posts = data;
                this.$nextTick(() => {
                  window.print();
                });
              });
      }   
  }  
}

const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
<div v-for="post in posts" :key="post.id">
  <label>Id:</label>{{post.id}}<br/>
  <label>Title:</label>{{post.title}}<br/>
  <label>Body:</label>{{post.body}}<br/>
  <hr/>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
👤Tolbxela

0👍

Now I fount answer on my question.

methods: {
            async getData() {
                await axios.get('/api/sale/receipt/' + this.$route.params.uuid).then((res) => {
                    this.sale = res.data
                    if(this.sale.customer == null) {
                        this.sale.customer = {}
                    }
                    $('.main-loader').hide();
                    // setTimeout(function() {
                        // window.print();
                        // window.close();
                    // }, 2000);
                }).catch((res) => {

                });

                window.print();
                window.close();
            }
        },

I just add async getData() to my function and add await to axios. And then move the window.print() outside of the axios. Now it works.

👤Mengseng Oeng

Leave a comment