Vue Tip: Watch Nested Values

March 11, 2022
|1 Minuten Lesezeit
|- Ansichten
March 11, 2022
1 Minuten Lesezeit
|- Ansichten
The watch option supports 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 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.
Vue Tip: Use v-bind to Pass Multiple Props to Components
Vue Tip: Use Vuex in Vue Router Navigation Guards
Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?
Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!
Ändern auf Github