I just picked up Vue yesterday and have been playing around, but I ran into a roadblock.
What I would like to do is emit an event from one component with a bit of data and then listen on another component for that event and update its own data.
I have the event emitter and listener working just fine but I cannot seem to update the data on the listener side.
Some setup, "E" is the gloabl event instance
window.E = new Vue();
Vue.component('example', require('./components/Example.vue'));
Vue.component('form1', require('./components/Form1.vue'));
const app = new Vue({
el: '#app',
});
Now here are my two components, the first emits the updated event:
<template>
<div class="panel panel-default">
<div class="panel-heading">Form</div>
<div class="panel-body">
<input class="form-control" type="text" v-model="input" title="Input">
</div>
</div>
</template>
<script>
export default {
data() {
return {
input: 'Input'
}
},
updated() {
E.$emit('updated', this.input);
}
}
</script>
This second one listens:
<template>
<div class="panel panel-default">
<div class="panel-heading">Message</div>
<div class="panel-body">
{{ message }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello",
}
},
created() {
E.$on('updated', (input) => {
console.log(input);
this.message = input;
});
}
}
</script>
The console.log correctly logs the updated input emitted from the first component but this.message = input doesn't appear to have any effect at all updated the text on the page.
If I put this.message = "bla"; inside of the created() function, outside of the event it works, updating the text on the page, but that doesn't help get the updated data from the event.
Any direction to get this working would be appreciated.