Skip to content

A Vue implantation of the double requestAnimationFrame method to force nextTick()

License

Notifications You must be signed in to change notification settings

pegeraw/vue-force-next-tick

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VueForceNextTick

When you need to ensure the DOM has been updated Vue's nextTick just doesn't work. You will need to use the double requestAnimationFrame method. This is an elegant wrapper to allow you to use the double requestAnimationFrame method within your Vue applications either globally Vue.$forceNextTick(callback) or within a method this.$forceNextTick(callback)

Table of contents

Installation

npm i vue-force-next-tick

# or

yarn add vue-force-next-tick

Default import

import Vue from 'vue'
import VueForceNextTick from 'vue-force-next-tick'
Vue.use(VueForceNextTick)

A bit of History

How does double requestanimationframe work

VueJS: How to wait for a browser re-render? Vue.nextTick doesn't seem to cover it.

Inspired by the advice of [Justineo] (https://github.com/Justineo)

Usage

Global Example

Vue.$forceNextTick(() => {
  // Your code here.
})

// or 

await Vue.$forceNextTick()

Within a component

methods: {
  yourMethod () {
    this.$forceNextTick(() => {
      // Your code here.
    })
  }
  
  // or 
  
  async yourMethod () {
    await this.$forceNextTick()
    // Your code here.
  }
}

EXAMPLE VUE COMPONENT

<template>
  <button
    @click="doSomethingBig"
  >
    Lets count to 10 million!
  </button>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      done: false
    }
  },
  methods: {
    doSomethingBig () {
      this.loading = true
      this.$forceNextTick(() => {
        for (var i = 1; i<10000000; ++i){
        	this.done = !i
        }
        this.done = true
        this.loading = false
      })
    }
  }
}
</script>

About

A Vue implantation of the double requestAnimationFrame method to force nextTick()

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%