Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

seansch00's avatar

Update component data from event data

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.

0 likes
5 replies
plweller3's avatar

I had a similar problem, and the cause was a second Vue instance created early on,forgotten, but still in the scripts section of my blade file. So double check that:

  1. the id=app is only set one in the rendered page. That includes the layout and included blade files.

  2. you are only including app.js once within the rendered page. (assuming you are compiling into app.js).

  3. you have not defined a second Vue (besides the event bus), and especially one with a non-reconcilable selector.

daniel-eppler's avatar

I'd guess that the context of 'this' in your event listener callback is not the one from your component but from the event bus - and there is no message property.

plweller3's avatar

The ES6 (input) => takes care of the 'this' scoping. If he were using the ES5 syntax, he's have to bind the this, but he's not.

Please or to participate in this conversation.