By webfansplz @webfansplz
When you mutate a reactive state in Vue.js, the resulting DOM updates are not applied synchronously.
Vue.js provides a utility for waiting for the next DOM update flush. Lets Go 👇:
<script setup>
import { ref } from "vue"
const count = ref(0)
function increment() {
count.value++
/**
* DOM is not yet updated, how can we make sure that the DOM gets updated
* Make the output be true
*/
console.log(+document.getElementById("counter").textContent === 1)
}
</script>
<template>
<button id="counter" @click="increment">
{{ count }}
</button>
</template>
