Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 283
Evaldas Butkus Avatar asked Jan 23 '16 15:01

Evaldas Butkus


People also ask

How do I listen to Vue events?

Listening to Events We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be v-on:click="handler" or with the shortcut, @click="handler" .

Why is VueJS so popular?

Vue. js has an incrementally flexible design that emphasizes component composition and declarative rendering. We provide custom web application development services using Vuejs for developing responsive, user-driven frontends that provides an unparalleled user experience.

What is $listeners Vue?

$listeners and v-bind="$attrs" $listeners is used for passing the event to be invoked in a child component. As similar to $listeners, Setting v-bind="$attrs" in a parent component with props can be also used for passing data.

What does $emit do in Vue?

Vue $emit is a function that lets us emit, or send, custom events from a child component to its parent. In a standard Vue flow, it is the best way to trigger certain events.


2 Answers

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/

like image 123
Pantelis Peslis Avatar answered Oct 22 '22 11:10

Pantelis Peslis


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.

like image 24
Andrius Avatar answered Oct 22 '22 12:10

Andrius