Menu
In the VueJs 2.0 docs I can't find any hooks that would listen on props changes.
Does VueJs have such hooks like onPropsUpdated() or similar?
Update
As @wostex suggested, I tried to watch my property but nothing changed. Then I realized that I've got a special case:
<template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> I am passing myProp that the parent component receives to the child component. Then the watch: {myProp: ...} is not working.
387
To watch for prop changes with the Vue. js Composition API, we can call the watch function. watch( () => props.
As long as you're updating a reactive property (props, computed props, and anything in data ), Vue knows to watch for when it changes. All we have to do is update count , and Vue detects this change. It then re-renders our app with the new value!
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
Vue. js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue. js is also used both for desktop and mobile app development with Electron framework.
You can watch props to execute some code upon props changes:
new Vue({ el: '#app', data: { text: 'Hello' }, components: { 'child' : { template: `<p>{{ myprop }}</p>`, props: ['myprop'], watch: { myprop: function(newVal, oldVal) { // watch it console.log('Prop changed: ', newVal, ' | was: ', oldVal) } } } } });<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <child :myprop="text"></child> <button @click="text = 'Another text'">Change text</button> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
