How to pass the value of the method attribute in Vue?

There are three tab, according to hover on one of them - have POPs up the corresponding block. To contact them should a data-attr.

<template>
 <li data-rel="ex-1" @click="expand">
 </li><li data-rel="ex-2" @click="expand">
 </li><li data-rel="ex-3" @click="expand">

 <div v-show="isActive" class="{ active: isActive }" data-rel="ex-1" @mouseleave="expand">
 <div v-show="isActive" class="{ active: isActive }" data-rel="ex-2" @mouseleave="expand">
 <div v-show="isActive" class="{ active: isActive }" data-rel="ex-3" @mouseleave="expand">
</div></div></div></li></template>

the <script>
export default {
 data() {
 return {
 isActive: false,
};
},
 methods: {
 expand() {
 this.isActive = !this.isActive;
},
},
};
</script>


Now float all the blocks.
Tell me how to pass the attribute to the method or maybe there's another way to implement expanded?

Upd: Not quite right asked. How to pass know(via $event), and how to link the elements through the attributes?
June 14th 19 at 18:24
4 answers
June 14th 19 at 18:26
Solution
In the data store the active room tab, and in the opening event use it:

Event:
@mouseleave="expand(1)"

In the tabs:
:class="{ active: active == 1 }"

data:
data() {
 return {
 acitve: 1,
};
 },


and the methods:
methods: {
 expand(number) {
 Vue.set(this, 'active', number); //this.active = number
},
 },
June 14th 19 at 18:28
Solution
I would do something like this. The point is that each expand item should be a flag isActive. Oh and by the way, to expand the tabs do not have to use some data- attributes. Well, plus you have a template layout part some tags are not closed, for example.
<template>
the <div>
 <li v-for="(item, index) in itemsVisibility" data-rel="`ex-${index}`" @click="expand(index)"></li>

 <div v-for="(item, index) in itemsVisibility" v-show="itemsVisibility[index]" :class="{ active: itemsVisibility[index] } " data-rel="`ex-${index}`" @mouseleave="expand(index)"></div>
</div>
</template>

the <script>
 export default {
 data() {
 return {
 itemsVisibility: [
 true, // first tab by default opened
false,
false,
],
};
},
 methods: {
 expand(index) {
 this.itemsVisibility[index] = !this.itemsVisibility[index];
},
},
};
</script>
Thanks for the example.
Layout nalona specially cleaned everything, the classes including for a more visual look. - Johathan.Jenkins commented on June 14th 19 at 18:31
June 14th 19 at 18:30
Solution
To contact them should a data-attr.

This is not vue. In vue should be something like this https://jsfiddle.net/fm4utx33/ (very approximately. actually it's more of an anti-pattern :) , but the meaning is that the input affects the data, and already they affect the display)
Well, if the tabs are not uniform, then here it is necessary to read and operejaet links: https://ru.vuejs.org/v2/guide/routing.html
Thanks for the example.
And source data such as menu items it is always recommended to identify in the data, even if there are for example two menu options? - Johathan.Jenkins commented on June 14th 19 at 18:33
the link is an example of "simple router from scratch", there is stored in the data conditional "menu item name", and depending on this value being rendered in one or the other component. - Johathan.Jenkins commented on June 14th 19 at 18:36
June 14th 19 at 18:32
It is not surprising that "pop up all the blocks". Because you have three blocks and the property responsible for the activity of the block is one that is common to all. No attributes will not help.

Or make some of the properties responsible for the activity of each unit of their own, or instead of a Boolean value activity work with a number of the active block.

Find more questions by tags Vue.js