Почему скрипт не работает?

Question

[lookingfor2]

У меня есть список элементов, у каждого элемента есть кнопка, при нажатии на которую открывается небольшой блок с двумя кнопками, редактировать или удалить элемент

<li>
<p> Элемент 1 </p>
<div class="list__item-actions">
      сама кнопка
      <button @click="openHideBlock" class="show">Дейстие</button>
      скрытый блок
      <div v-show="opened" class="list__item-hideblock">
        <button @click="editTemplate">Редактировать</button>
        <button @click="deleteTemplate">Удалить</button> 
      </div>
    </div>
</li>

Мне нужно чтобы после того как мы открыли этот небольшой блок, при клике вне этого блока или на кнопку повторно, он скрывался

Comments

[Andrey Vasilev]

можешь нормально структурировать, я тебе отвечу. несовсем понятно

[lookingfor2]

Andrey Vasilev, посмотри сейчас

[Andrey Vasilev]

lookingfor2, а как можно кликнуть на кнопку повторно, если у тебя при клике ВНЕ попапа уже окно скрывается?)

[Andrey Vasilev]

lookingfor2, или ты забыл кнопку повторно указать?

[Andrey Vasilev]

@click="openHideBlock" в этом методе ты должен менять this.opened = !this.opened
далее тебе лучше сделать ещё одну "подложку" из дива, чтобы ты смог при открытии попапа сделать сзади невидимую зону, по типу width: 100%, height: 100%, opacity: 0.
и при клике на эту зону вызывается всё тот же openHideBlock, который меняет состояние и закрывает popup

[Andrey Vasilev]

lookingfor2, если у тебя есть какая-то кнопка в попапе, то так же вешай на неё этот метод

[lookingfor2]

Andrey Vasilev, это то что я хотел, спасибо большое !)

[Andrey Vasilev]

lookingfor2, пожалуйста)

Answer 1

[Andrey Vasilev]

ответ:
@click="openHideBlock" в этом методе ты должен менять this.opened = !this.opened
далее тебе лучше сделать ещё одну "подложку" из дива, чтобы ты смог при открытии попапа сделать сзади невидимую зону, по типу width: 100%, height: 100%, opacity: 0.
и при клике на эту зону вызывается всё тот же openHideBlock, который меняет состояние и закрывает popup