Pradeepb
Pradeepb

Reputation: 2562

Weird behaviour of $emit or $on

In the website I am working on, I had to use event emitters to achieve the requirements. Please have look at the fiddle. When adding a new message, it will work just fine. But the problem starts when I click on route1 or route2 and return to Parent view. Then, I try adding a new message. It will appear twice or thrice (if you visit all the routes and return). I am not entirely sure whats going on. Any suggestions to solve this issue would be great.

PS: Please don't suggest to use $parent instead of $root because in my project I have to user $root since the component is not an immediate child of the parent component.

Here is the example.

const Parent = {
	template: `
  <div>
    <child-component></child-component>
    <p v-for="msg in allMessages">{{msg}}</p>
    </div>
  `,
  computed: {
    allMessages: function () {
      return this.$root.$store.state.storedMessages
    }
  },
  mounted(){
    this.$root.$on('NewMessage', function(data){
    	this.$store.dispatch('newMessage', data)
    })
  }
}
Vue.component('navs', {
	template: `
  <div>
    <div class="left-nav-menu">

          <router-link to="/">Parent</router-link>

          <router-link to="/route1">route1</router-link>

          <router-link to="/route2">route2</router-link>

    </div>
  </div>
`
})

Vue.component('child-component', {
  template: `
  	 <form id="messageForm" @submit.prevent="sendMessage">
      <input type="text" v-model="message">
      <button type="submit" >Send Message</button>
    </form>
  `,
  data () {
    return {
      message: ''
    }
  },
  computed: {
  	allMessages: function () {
      return this.$root.$store.state.storedMessages
    }
  },
  methods: {
    sendMessage: function () {
      this.$root.$emit('NewMessage', this.message)
    }
  }
})

const route1 = {
	template: `<p>Route1</p>`
}
const route2 = {
	template: `<p>Route2</p>`
}

const store = new Vuex.Store({
	state: {
  	storedMessages: []
  },
    mutations: {
    	newMessage(state, data) {
          state.storedMessages.push(data)
      }
    },
    actions: {
        newMessage({commit}, payload) {
        
            commit('newMessage', payload)
        }
    }
})
const router = new VueRouter({
	routes: [
  	{ name: 'parent', path: '/', component: Parent },
     { name: 'route1', path: '/route1', component: route1 },
      { name: 'route2', path: '/route2', component: route2 }
  ]
})
new Vue({
	el: '#app',
  store,
  router
})
* {
  box-sizing: border-box;
}

.listing {
  list-style-type: none;
  overflow: hidden;
  padding: 0;
  li {
    float: left;
    width: 175px;
    padding: 10px;
    text-align: center;
    border: 1px #ddd solid;
    background: white;
    margin: 5px;
    cursor: pointer;
    img {
      width: 100%;
      margin-bottom: 7px;
    }
    &:hover {
      background: #eee;
    }
  }
}

.item-view {
  text-align: center;
}

.item {
  background: white;
  padding: 10px;
}

a {
  font-size: 16px;
  display: inline-block;
  padding: 10px;
  border: 1px #ddd solid;
  background: white;
  color: black;
  margin: 10px;
  &.back-listing {
    position: absolute;
    left: 0;
    top: 0;
  }
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <navs></navs>
  <router-view></router-view>
</div>

Upvotes: 1

Views: 39

Answers (1)

Bert
Bert

Reputation: 82489

This is happening because you are continually adding message handlers in mounted. You need to remove them.

const Parent = {
    template: `
  <div>
    <child-component></child-component>
    <p v-for="msg in allMessages">{{msg}}</p>
    </div>
  `,
  computed: {
    allMessages: function () {
      return this.$root.$store.state.storedMessages
    }
  },
  methods:{
    sendMessage(data){
      this.$store.dispatch('newMessage', data)
    }
  },
  mounted(){
    this.$root.$on('NewMessage', this.sendMessage)
  },
  beforeDestroy(){
    this.$root.$off('NewMessage', this.sendMessage)
  }
}

Updated code.

const Parent = {
	template: `
  <div>
    <child-component></child-component>
    <p v-for="msg in allMessages">{{msg}}</p>
    </div>
  `,
  computed: {
    allMessages: function () {
      return this.$root.$store.state.storedMessages
    }
  },
  methods:{
  	sendMessage(data){
      this.$store.dispatch('newMessage', data)
    }
  },
  mounted(){
    this.$root.$on('NewMessage', this.sendMessage)
  },
  beforeDestroy(){
    this.$root.$off('NewMessage', this.sendMessage)
  }
}

Vue.component('navs', {
	template: `
  <div>
    <div class="left-nav-menu">

          <router-link to="/">Parent</router-link>

          <router-link to="/route1">route1</router-link>

          <router-link to="/route2">route2</router-link>

    </div>
  </div>
`
})

Vue.component('child-component', {
  template: `
  	 <form id="messageForm" @submit.prevent="sendMessage">
      <input type="text" v-model="message">
      <button type="submit" >Send Message</button>
    </form>
  `,
  data () {
    return {
      message: ''
    }
  },
  computed: {
  	allMessages: function () {
      return this.$root.$store.state.storedMessages
    }
  },
  methods: {
    sendMessage: function () {
      this.$root.$emit('NewMessage', this.message)
    }
  }
})

const route1 = {
	template: `<p>Route1</p>`
}
const route2 = {
	template: `<p>Route2</p>`
}

const store = new Vuex.Store({
	state: {
  	storedMessages: []
  },
    mutations: {
    	newMessage(state, data) {
          state.storedMessages.push(data)
      }
    },
    actions: {
        newMessage({commit}, payload) {
        
            commit('newMessage', payload)
        }
    }
})
const router = new VueRouter({
	routes: [
  	{ name: 'parent', path: '/', component: Parent },
     { name: 'route1', path: '/route1', component: route1 },
      { name: 'route2', path: '/route2', component: route2 }
  ]
})
new Vue({
	el: '#app',
  store,
  router
})
* {
  box-sizing: border-box;
}

.listing {
  list-style-type: none;
  overflow: hidden;
  padding: 0;
  li {
    float: left;
    width: 175px;
    padding: 10px;
    text-align: center;
    border: 1px #ddd solid;
    background: white;
    margin: 5px;
    cursor: pointer;
    img {
      width: 100%;
      margin-bottom: 7px;
    }
    &:hover {
      background: #eee;
    }
  }
}

.item-view {
  text-align: center;
}

.item {
  background: white;
  padding: 10px;
}

a {
  font-size: 16px;
  display: inline-block;
  padding: 10px;
  border: 1px #ddd solid;
  background: white;
  color: black;
  margin: 10px;
  &.back-listing {
    position: absolute;
    left: 0;
    top: 0;
  }
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <navs></navs>
  <router-view></router-view>
</div>

Upvotes: 3

Related Questions