Eventbus in Vue.js isn't updating my component

Question

I have two components and I want to display what the user enters in one on the other component. I don't really want to use a state manager like vuex because it's probably a bit overkill as it's a small application

this is my main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import { routes }from './routes';

export const EventBus = new Vue();

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Component that emits the event called addHtml.vue

<template>
    <div>
        <h1>Add HTML</h1>
        <hr>
        <button @click="navigateToHome" class="btn btn-primary">Go to Library</button>
        <hr>
        Title <input type="text" v-model="title">
        <button @click="emitGlobalClickEvent()">Press me</button>
    </div>

</template>

<script>
  import { EventBus } from '../../main.js'

  export default {
    data: function () {
      return {
        title: ''
      }
    },
    methods: {
      navigateToHome() {
        this.$router.push('/');
      },
      emitGlobalClickEvent() {
        console.log(this.title);
        EventBus.$emit('titleChanged', this.title);
      }
    }
  }
</script>

the file that listens for the event thats emitted and to display what was entered on the other component:

<template>
    <div>
        <h1>Existing Items</h1>
        <hr>
        <p>{{ test }}</p>
    </div>
</template>

<script>
    import { EventBus } from '../main.js';

    export default {
      data: function () {
        return {
          test: ''
        }
      },
      created() {
        EventBus.$on('titleChanged', (data) => {
          console.log('in here!',data);
          this.test = data;
        });
      }
    }

</script>

the console.log('in here!',data); inside the listener gets printed out to the console so I know it's picking it up however {{ test }} doesn't get updated to what the user enters when I click back onto the component to view if it was updated, it just remains blank? Any Ideas?

Answer 1

If you are using vue-router to display the secound component. The reason might be that you just see a new instance of that component everytime and the value of test will be reseted when the component is destroyed. You can bind it to a (global) variable to persist test: window.yourApp.test . Maybe webpack will mourn but it is possible. Even eslint has an ignore comment for such cases.

Answer 2

It is like Reiner said, because the component gets destroyed once you switch pages. Try wrapping your router-view inside a keep-alive:

<keep-alive>
  <router-view><router-view>
</keep-alive> 

Also. If you want to keep the state of just one specific component / page you can use the include tag:

<keep-alive include='name of component'>
  <router-view></router-view>
</keep-alive>