@kot9ra161
Начинающий

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

Добрый день. Начинаю знакомиться с 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
}
})
  • Вопрос задан
  • 488 просмотров
Решения вопроса 3
Vlad_IT
@Vlad_IT
Front-end разработчик
Не очень понятно из вопроса. Вы хотите реализацию метода close?
new Vue({
el: '#app',
data: {
open1: false,
open2: false
},
methods: {
  close: function() {
    this.open1 = false;
    this.open2 = false;
  }
}
})
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
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>
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
нужно сделать компонент для диалога:

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

(код как образец, не для продакшена)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы