Vuejs DOM not updating if the event is fired from $on method

Question

I'm guessing that it has to do something with Vue not detecting the changes in the tracks object.

mounted(){
        Event.$emit('requestCurrentTrack');
        Event.$on('currentSong', (data) => this.fetchAlbum(data)); //Data from this method won't output on the screen.

        this.fetchAlbum(); // Data from this method out will output to the screen
    },
methods:{
        fetchAlbum(){
            axios.get('/api/album/'+this.id).then((response)=>{
                this.album = response.data[1][0];
                this.tracks = response.data[0];
                this.artistName = this.tracks[0].artist;
            });
        },
        play(data, index){
            if(data){
              Event.$emit('playTrack', data, index);
            }
        }
}

The Event.$on method is simply setting the event handler callback function. That function won't get called until the currentSong event is emitted, which you aren't doing anywhere in the code you've shared. Also, you're passing data to the this.fetchAlbum method, but that method doesn't take in a parameter. — thanksd
– thanksd, Commented May 1, 2018 at 17:32

Roland · Accepted Answer · 2018-05-01 19:03:09Z

You have to learn more about event bus.Take a look to this article

To use event bus take a look below:

In main.js you have to create the event bus

import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue() //creating the event bus

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

A rendered component,lets name it childOne.vue:

<template>
  <div>
    <button @click="clicked">Click Me</button>
  </div>
</template>
<script>
    import { eventBus } from '../main'
    export default {
    name: 'child-one',
    methods: {
      clicked () {
        eventBus.$emit('eventName', 'text passed through event bus') //creating the event with the name eventName and pass a text
      }
    }
  }
</script>

Another rendered component lets name it childTwo.vue

<template>
  <div>
    <!-- some html here -->  
  </div>
</template>
<script>
    import { eventBus } from '../main'
    export default {
    name: 'child-two',
      created() {
        eventBus.$on('eventName', dataPassed => { //listening to event with name eventName
        console.log(dataPassed)
      })
    }
  }
</script>

Note the eventBus will work only if your components are rendered.So to make this example to work you can do it by importing the two components in App.vue and registrering them

Collectives™ on Stack Overflow

Vuejs DOM not updating if the event is fired from $on method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related