How to Set A Methods For A Class In Vue.js

Question

you know that we can use on events for a class in JQuery. for instance

$(".example").click(function(){
//the process
})

I am new on Vue.js and I am working on methods in vue.js Vue use v-on attr to set a method for a element. But I dont want to define attr for all elements whichs use same function.

For Example

<ul class="container">
   <li v-on="click:Menu" >Menu 1</li>
</ul>

<ol class="click">
   <li v-on="click:Menu" >Menu 1</li>
   <li v-on="click:Menu" >Menu 2</li>
</ol>

You must saw, I used v-on attr for all li elements. For li elements it is not problem, I can solve it v-repeat but for some cases, I have to set same function for lots of divs or form. I want to set a class for a function and set a method for the class.

Is there any solution for it?

Answer 1

David's answer is good. But if you don't want to use Jquery, you can use document.querySelectorAll instead of $(this.el).find("li") and then add the click handlers with addEventListener in the directive.

Having said that, you don't have to add event listeners to all the elements in a directive (even though a directive might be the best solution for this). Another approach would be to do what you suggest, put the handlers on the parent elements, and then implement some logic depending on which element the function was called from. Example:

https://jsfiddle.net/q7xcbuxd/33/

<div id="app">
  <ul class="UL_items" v-on="click:Menu(1)">
    <li>Menu 1 item 1</li>
  </ul>

<ol class="OL_items" v-on="click:Menu(2)">
  <li>Menu 2 item 1</li>
  <li>Menu 2 item 2</li>
  <li>Menu 2 item 3</li>
</ol>

<div class="DIV_items" v-on="click:Menu(3)">
    lots<br/>
    of<br/>
    items<br/>
</div>

</div>

var vue = new Vue({
    el: '#app',

    methods: {
        Menu: function(id){
            console.log('You invoked function Menu' + id + ' ' +
                        'by clicking on ' + event.path[0].innerHTML + ' ' +
                        'which is of type ' + event.srcElement.nodeName + '.\n' +
                        'The parent element\'s class name is \'' + event.srcElement.parentElement.className + '\' ' + 
                        'which is of type ' + event.srcElement.parentElement.nodeName + '.');
        }
    }
});

Answer 2

I would write a directive for <ol> and <ul> that adds click handlers for all <li> children.

Something like:

Vue.directive('menu', {
    bind: function () {
        $(this.el).find("li").on("click", function (event) {
            this.menu_click(event);
        });
    },
    update: function (value) {
        this.menu_click = value;
    },
    unbind: function () {
        $(this.el).find("li").off("click", this.menu_click);
    }
})

And use it like this:

<ul class="container" v-menu="container_click">
    <li>Menu 1</li>
</ul>

<ol class="click" v-menu="click">
    <li>Menu 1</li>
    <li>Menu 2</li>
</ol>