Clever Geek Handbook

In vuejs, why do I need to use nextTick when using installed interceptors?

As the docs said , I need to use nextTick to confirm $el

ready, but in another page , it roughly means I $el

was ready at the time of the call mounted

. So why would one need to use nextTick when using set hooks?

+3


source to share


1 answer


I believe it is el

actually set when the mounted

hook is called . The real use for is nextTick

described here . It is mainly used when you need direct DOM access (which is not recommended by the way) immediately after changing any change to your DOM in your code. Check out this code:



new Vue({
  el: '#app',
  data: {
    text: 'one'
  },
  components: {
    'child' : {
      template: `<p>{{ text }}</p>`,
      props: ['text']
    }
  },
  mounted: function() {
    console.log(document.querySelector('p').textContent); // 'one'
    this.text = 'two'; // assign new value
    console.log('after text has changed: ');
    console.log(document.querySelector('p').textContent); // still 'one'
    this.$nextTick(function() {
      console.log('nextTick: ', document.querySelector('p').textContent); // now 'two' after 'nextTick'
    })
  }
});
      

        
        
        
      

    
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child :text="text"></child>
</div>
Run codeHide result


So, my guess is that the migration docs are misleading in this case.

+4


source






More articles:


All Articles