Кнопка закрытия на vue.js?

Question

[Николай Николаев]

Добрый день. Начинаю знакомиться с vue.js и не пойму как правильно описать метод для кнопки закрытия элемента.
Т.е сделать одну общую кнопку close для двух разных окон с абсолютным позиционированием, т.к окна при открытии перекрывают область видимости кнопок open
HTML:

<div id="app">
<div class="app">
<div class="buttons-open">
<!-- Кнопки которые открывают блоки -->
<a @click='open1 = !open1'>открыть первый блок</a>
<a @click='open2 = !open2'>открыть второй блок</a>
</div>
<div class="block-1" v-if='open1'>
<a @click="close">Скрыть блок</a>
<div class="content">Первый блок</div>
</div>
<div class="block-2" v-if='open2'>
<a @click="close">Скрыть блок</a>
<div class="content">Второй блок</div>
</div>
</div>
</div>

VUE.JS:

new Vue({
el: '#app',
data: {
open1: false,
open2: false
}
})

Answer 1

[Владимир Проскурин]

Не очень понятно из вопроса. Вы хотите реализацию метода close?

new Vue({
el: '#app',
data: {
open1: false,
open2: false
},
methods: {
  close: function() {
    this.open1 = false;
    this.open2 = false;
  }
}
})

Comments

[Николай Николаев]

Спасибо.

Answer 2

[0xD34F]

data: () => ({
  opened: null,
  blocks: [
    { id: 1, content: 'Я первый' },
    { id: 2, content: 'А я второй' },
    { id: 3, content: 'Третьим буду' },
  ],
}),

<a v-for="b in blocks" @click="opened = b">открыть {{ b.id }} блок</a>

<div v-if="opened" :class="`block-${opened.id}`">
  <a @click="opened = null">Скрыть блок</a>
  <div class="content">{{ opened.content }}</div>
</div>

Comments

[Николай Николаев]

Спасибо.

Answer 3

[Антон Антон]

нужно сделать компонент для диалога:

https://jsfiddle.net/odv9kahj/1/

(код как образец, не для продакшена)