How to pass attribute value to Vue method?

Question

Vue.js

There are three tabs, on hovering over one of them, the corresponding block should pop up. They should be connected by data-attr.

<template>
  <li data-rel="ex-1" @click="expand">
  <li data-rel="ex-2" @click="expand">
  <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">
</template>

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

Now all blocks pop up.
Tell me how to pass an attribute to a method, or is there another way to implement expanded?
Upd : Not quite the right question. How to pass know (through $event), but how to bind elements through attributes?

Answer 1

В data храните номер активного таба, а в эвентах используйте его:
Эвент:
В табах:
data:

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

а в методах:

methods: {
    expand(number) {
      Vue.set(this, 'active', number); //this.active = number
    },
  },