Как для каждой кнопки в цикле задать свой обработчик?

Question

[Лев Воробьев]

Добрый день, даже не знаю, как вопрос сформулировать, поэтому в гугле ничего не нашел. Суть такая: делаю приложение для того, чтобы помочь накопить деньги на определенную вещь. В цикле вывожу уже имеющиеся цели:

<div v-for="cat in categories" :key="cat.id">
            <h2>Автомобиль</h2>
            <div class="progress mt-4 mb-4">ТУТ ПРОГРЕССБАР</div>
            <div>Накоплено 1000 из 10000</div>
            <div>
                <button @click=show = !show>Добавить денег</button>
            </div>
            <div v-show=show>
                // тут хочется вывести форму добавления денег
            </div>
        </div>

Проблема в том, что если добавить

@click=function

кнопке, то при клике будут показываться сразу все формы, если например целей накопить 2 и больше.
Ниже картинка как сейчас работает:

А вот что происходит если нажать на любую кнопку Добавить:

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

Answer 1

[Виктор]

Alex Alex, почти правильно ответил, проблема в том что у тебя один show на все формы, поэтом при клике на одну у тебя раскрываются все. Суть решения в том что ты сделаешь компонент формы и будешь циклом выводить его и тогда у каждой формы будет свой show и, соответственно, открываться будет нужная, а не все

<div v-for="cat in categories" :key="cat.id">
     <app-form :category="cat" /> //тут весь компонент у которого будет свой show
</div>

Можно конечно еще через event.target или ref, но как по мне это уже будет костыль, не самое элегантное решение

Answer 2

[Alex]

Свойство должны быть не глобальным, а частью категории

<button @click="cat.show = !cat.show">Добавить денег</button>

<div v-show="cat.show">
  // тут хочется вывести форму добавления денег
</div>

Comments

[Лев Воробьев]

Дело в том, что сейчас при нажатии на одну кнопку показываются сразу все формы, в этом проблема

[Alex]

Лев Воробьев, Изменил ответ

[Alex]

Лев Воробьев, И, полагаю, в вашем случае лучше использовать v-if вместо v-show