Обработчик клика кнопки для открытия tooltip vue.js?

Question

[Sergeyjed]

На странице будет много кнопок открывающие тоолтип, возникла проблема с методом this открываются сразу все. как во vue.js указать на какую кнопку был клик и открыть соседний блок?

Простой пример https://codepen.io/serg-style/pen/PVPvxp

Answer 1

[0xD34F]

Компонент отдельный сделайте:

Vue.component('v-tooltip', {
  template: `
<div class="wrp">
  <div class="btn" @click="visible = !visible">{{ label }}</div>
  <div class="tooltip" :class="{ visible }">{{ message }}</div>
</div>`,
  props: {
    label: {
      type: String,
      default: 'click me',
    },
    message: {
      type: String,
      default: 'hello, world!!',
    },
  },
  data: () => ({
    visible: false,
  }),
});

И создавайте столько экземпляров, сколько надо.