Vue.js - How to handle all elements with the same selector?

Question

How to create a Vue.js logic to handle all tag elements with the same class selector?

I have this simple code: http://jsfiddle.net/x2spo1qu/

var dropdown = new Vue({
  el: '.dropdown',
  data: {
    is_open : false
  },
  methods: {
    onClick: function (event) {
      // # toggle the dropdown open/closed state
      // ---
      this.is_open = ! this.is_open;
    },
    mouseLeave: function (event) {
      // # set show of dropdown to false
      // ----
      this.is_open = false;
    }
  }
});

But it only works for the first dropdown in the HTML and does not work for the second.

Please explain me how to do this.

It makes it easier to answer a question when the problem is more evident. Here is your fiddle showing your problem in a simple, to-the-point way. jsfiddle.net/pr7h32r5/2 Now when we solve this fiddle you can apply the fix to your more complex example. That said, I don't think you can make Vue use more than on element. — DutGRIFF
– DutGRIFF, Commented Jun 11, 2015 at 23:45

Dinoel Vokiniv · Accepted Answer · 2015-06-14 14:15:00Z

From vuejs.org :

Vue.js uses DOM-based templating. Each Vue instance is associated with a corresponding DOM element. When a Vue instance is created, it recursively walks all child nodes of its root element while setting up the necessary data bindings. After the View is compiled, it becomes reactive to data changes.

you can achieve this using Vue component system follow this example :

var bs3_dropdown = Vue.extend
({
    props: ['name'],
    replace: true,

    template: '<li class="dropdown" v-class="open : is_open" v-on="mouseleave : mouseLeave"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" v-on="click : onClick">{{ name }} <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <content></content> </ul> </li>',

    data: function () {
        return  {
            is_open: false,
        }
    },

    methods : {
        onClick : function(event) {
            // # toggle the dropdown open/closed state
            // ---
            this.is_open = ! this.is_open;
        },
        mouseLeave : function(event) {
            // # set show of dropdown to false
            // ----
            this.is_open = false;
        }
    },

    created: function () {
        console.log('An instance of MyComponent has been created!')
    }
});

Vue.component('bs3-dropdown', bs3_dropdown);

full : http://jsfiddle.net/msa965j5/
there is some bug beacuse of initial HTML

Collectives™ on Stack Overflow

Vue.js - How to handle all elements with the same selector?

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