Alpine JS implementation of the double requestAnimationFrame method to force
$nextTick
You can find out more about the issue in Vue here - vuejs/vue#9200
Vue JS version - https://github.com/twickstrom/vue-force-next-tick
<script
defer
src="https://unpkg.com/alpinejs-force-next-tick@latest/dist/force-next-tick.min.js"
></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>yarn add -D alpinejs-force-next-tick
npm install -D alpinejs-force-next-tickimport Alpine from 'alpinejs'
import force-next-tick from 'alpinejs-force-next-tick'
Alpine.plugin(force-next-tick)
Alpine.start()It works the same way as Alpine JS $nextTick but uses the double
requestAnimationFrame method - https://alpinejs.dev/magics/nextTick
<body x-data="{ firstName: 'John' }">
<button
@click="
firstName = 'Jane'
$forceNextTick(() => console.log($el.innerText))
"
x-text="firstName"
>
</button>
</body>Here we are pausing an async function until after pending DOM updates. With
this approach an argument is not required.
<body x-data="{ firstName: 'John' }">
<button
@click="
firstName = 'Jane'
await $forceNextTick()
console.log($el.innerText)
"
x-text="firstName"
>
</button>
</body>
