Alpine JS Force $nextTick

Alpine JS implementation of the double requestAnimationFrame method to force
$nextTick

---

You can find out more about the issue in Vue here -
https://github.com/vuejs/vue/issues/9200

Vue JS version - https://github.com/twickstrom/vue-force-next-tick

Install

$3

``html
defer
src="https://unpkg.com/alpinejs-force-next-tick@latest/dist/force-next-tick.min.js"
>


`

$3

`shell
yarn add -D alpinejs-force-next-tick

npm install -D alpinejs-force-next-tick
`

`js
import Alpine from 'alpinejs'
import force-next-tick from 'alpinejs-force-next-tick'

Alpine.plugin(force-next-tick)

Alpine.start()
`

Example

It works the same way as Alpine JS $nextTick but uses the double
requestAnimationFrame method - https://alpinejs.dev/magics/nextTick

`html

@click="
firstName = 'Jane'
$forceNextTick(() => console.log($el.innerText))
"
x-text="firstName"
>


`

Here we are pausing an async function until after pending DOM updates. With
this approach an argument is not required.

`html

@click="
firstName = 'Jane'
await $forceNextTick()
console.log($el.innerText)
"
x-text="firstName"
>


``

Stats