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?

swift · Accepted Answer · 2015-07-24 22:49:11Z

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 + '.');
        }
    }
});

David K. Hess · Accepted Answer · 2015-07-23 19:21:10Z

3

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>

edited Jul 23, 2015 at 19:21

answered Jul 23, 2015 at 13:13

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

3 Comments

Kamuran Sönecek Over a year ago

Hi david, thanks for your answer. I dont want to depend jQuery, or any vue attr. is there another way to work a method for a class in anywhere in el?

David K. Hess Over a year ago

You certainly don't have to use jQuery - but you must select all of the li elements and put a click handler on them - and jQuery is an easy way to do that. I did update the answer to show how you can specify a call back handler with the directive. But, if you don't want to use a directive like v-menu at all, I have to ask – why are you using Vue?

Kamuran Sönecek Over a year ago

your solution is the nearest. Thanks David

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related