CODEWITHSUNDEEP
javascriptvue.js
Evaldas Butkus
Evaldas Butkus

Reputation: 665

Vuejs listeners

I'm creating simple app, which will have few listeners. I can't figure out how logic behind that should look like.

HTML:

<div id="playerProgressBar">
    <div id="playerHead"></div>
</div>

In Vue object i have defined variable:

music: document.getElementById('playerHead');

My listener should look like this:

music.addEventListener("timeupdate", timeUpdate, false);

music.addEventListener("canplaythrough", function () {
    //code
}, false);

function timeUpdate() {
    //code
}

So what would be correct way to use listeners in vuejs? Should i use custom directives here? Since I have no event I can't use methods. Putting whole logic in ready function doesn't seem to be correct way. Thanks in advance!

Upvotes: 7

Views: 10962

Answers (2)

pespantelis
pespantelis

Reputation: 15372

v-on (shorthand: @)

When used on a normal element, it listens to native DOM events only. When used on a custom element component, it also listens to custom events emitted on that child component.

So, you could attach an event listener like this:

<video @timeupdate="onTimeUpdateListener" src="..."></video>

Here is an example where I'm using the MediaElement library: https://jsfiddle.net/248nqk02/

Upvotes: 22

Andrius
Andrius

Reputation: 5939

This would be the Vue-esque way to assign HTML elements to the app:

<video v-el:video-element controls>
    <source src="mov_bbb.mp4" type="video/mp4">
</video>

This resolved to a variable this.$els.videoElement in the app. More info here.

Now, to add listeners and functions for them, I'd do something like that:

...
ready: function() {
    this.addListeners();
},
methods: {
    addListeners: function() {
        console.log('adding listeners');
        this.$els.videoElement.addEventListener('timeupdate',this.videoTimeUpdated,false);
    },
    videoTimeUpdated: function() {
        console.log('video time updated');
    }
}
...

Obviously, you could put everything video (or any other event related) stuff in a separate component (not directive, in Vue) to keep the code a bit more neat.

Upvotes: 5

Related Questions