Vue Tip: Watch Nested Values
Michael Hoffmann
Mar 11, 2022
| 1 min read
| 117 views
Michael Hoffmann
Mar 11, 2022
1 min read
| 117 views
Script
The watch option support a dot-delimited path as key to watch nested values:
<script setup lang="ts">import { watch } from 'vue'import { useRoute } from 'vue-router'const route = useRoute()watch( () => route.query.id, (queryId) => { console.log('Route Query ID', queryId) })</script>The above example assumes that you are using the Composition API with TypeScript.
If you are using Options API the code looks like this:
<script>export default { watch: { // Note: only simple paths. Expressions are not supported. '$route.query.id'(queryId) { console.log('Route Query ID', queryId) }, },}</script>If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.
Vue Tip: Use Vuex in Vue Router Navigation GuardsMar 4, 2022
Vue Tip: Use v-bind to Pass Multiple Props to ComponentsMar 18, 2022