Javascript is required
Mokkapps Logo

Vue Tip: Trigger Watcher Immediately

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Dec 2, 2021
1 min read
Trigger Watcher Immediately Image

The watch hook provides an option that its callback function is called immediately:

<template>  <input v-model="counter"></template><script setup>import { ref, watch } from "vue";const counter = ref(0);watch(  counter,  (newValue, oldValue) => {    console.log("The new counter value is: " + counter.value);  },  { immediate: true });</script>

This code will generate the output New counter value is: 0 after the setup method is executed initially. It will also create a log message for all subsequent counter-value changes.

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me. Alternatively (or additionally), you can also subscribe to my newsletter.