Показ одного шаблона между несколькими компонентами vue.js?

Question

[Jimmy Tod]

Извиняюсь если вопрос поставлен некорректно, дилетант еще с Vue.
Не могу придумать как победить проблему:

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

<div id="list">
    <div class="element" el="el1">
    </div>
    <div class="element" el="el2">
    </div>
    <div class="element" el="el3">
    </div>
    <div class="element" el="el4">
    </div>
</div>

Шаблон:

<div id="i_am_template" onclick="do_something()">Удалить</div>

При нажатии на элемент, внутри него должен появиться Шаблон, допустим чтобы удалить этот элемент.
Смотрел видео где в одном компоненте показывают разные шаблоны, а тут в точности наоборот и не могу понять куда смотреть.

P.S. При нажатии на элемент, шаблон должен удаляться с других кнопок
Буду оч благодарен

Answer 1

[Evgeny Kulakov]

Формировать список через v-for:

<div id="list">
    <div v-for="(el,index) in elements" class="element" :el="el" @click="current=index">
       <div v-if="current === index" id="i_am_template" onclick="do_something()">Удалить</div>
    </div>
</div>

Comments

[Jimmy Tod]

Эх, тогда придется переделать ответ сервера на json. Может есть ещё варианты?)

[Evgeny Kulakov]

Jimmy Tod, а смысл?)