Vue-----this.$nextTick()

Vue-----this.$nextTick()

$nextTick

Vue.nextTick () callback is executing the delay after the end of the next update cycle DOM, use $ nextTick After modifying the data, you can obtain the updated DOM in the callback (change occurred after the dom is in nextTick ())
This method action when the data is modified using this method will get the callback dom updated and then render out

Vue.nextTick () function: callback execution delay after the end of the next update cycle dom. Using this method immediately after modifying the data, obtained dom updated

Vue.nextTick need to use in the following two cases ()

1.Vue created life cycle () function of the DOM operations hook must be placed Vue.nextTick () callback function, the reason is created () function to execute when the DOM hooks in fact did not make any rendering, and this when the operation is tantamount to perform DOM vain, so here js code DOM sure to operate into Vue.nextTick () callback function. The corresponding hook function is mounted, because when the hook function performs all mount DOM and rendering are complete, any DOM operation at this time will not matter in the hook function.

2. In an action to be performed after the data changes, and this operation requires the use of data changes with changing the DOM structure of the time, this operation should be put Vue.nextTick () callback function.

For example vue plug BScroll roll axis plug-in

<div class="menu-wrapper" ref="menuwrapper">
  <ul>
    <li v-for="itemgood in goods" class="menu-item">
      <div class="goodsli">
        <span class="text">
           <span v-show="itemgood.type > 0" class="icon" :class="classmap[itemgood.type]"></span>{{itemgood.name}}
        </span>
      </div>
    </li>
  </ul>
</div>
export default{
    created(){
        axios.get('../static/data.json').then((response) =>{
            this.goods = response.data.goods;
            this.$nextTick(() => {
                this._initScroll();
            })
        })
    },
    methods:{
      _initScroll(){
          this.menuScroll = new BScroll(this.$refs.menuwrapper,{});
      }
    }
}