Nantes Paradox Market

    vue-force-next-tick
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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>

    Install

    npm i vue-force-next-tick

    DownloadsWeekly Downloads

    1,119

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    8.41 kB

    Total Files

    7

    Last publish

    Collaborators

    • timwickstrom