I am currently working on dynamically updating a Vue JS prop after the view has loaded and the custom has been initialized. In my project, I am building a custom Vue plugin where I use props to pass options, one of which is an object that needs to have its value updated dynamically after the component has loaded. Here is an example:
<div id="app">
<script>
var seedData = {
percent: 50,
name: 'Smith'
}
setInterval(() => {
seedData = {
percent: Math.random(),
name: 'Smith'
}
}, 1000)
</script>
<offers :parent-data="seedData"></offers>
</div>
Vue.component('offers', {
template: '<h1>Parent Data: {{ parentData.percent }}</h1>',
props: {
parentData: {
default: () => ({
percent: 0,
name: 'John'
}),
type: Object
},
}
});
// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
el: '#app'
});
Initially, the values from offersData are loaded, but the new values set by the setInterval function do not get passed through.
I attempted to add a watcher inside my custom Vue plugin that is loaded through <offers>, but unfortunately, this approach did not work as expected:
watch: {
parentData: function (newVal) {
this.parentData = newVal
}
}
UPDATE
Here is my implementation:
Code Pen -> https://codepen.io/sts-ryan-holton/pen/VwYNzdZ