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

Добрый день, даже не знаю, как вопрос сформулировать, поэтому в гугле ничего не нашел. Суть такая: делаю приложение для того, чтобы помочь накопить деньги на определенную вещь. В цикле вывожу уже имеющиеся цели:
<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 и больше.
Ниже картинка как сейчас работает:
5e523c0470538280093242.png
А вот что происходит если нажать на любую кнопку Добавить:
5e523c30cfd68273280700.png
Не обращайте внимания на другие поля, я потом исправлю. Главное, как вызвать у своей цели именно свою форму? Форма подключается как компонент
  • Вопрос задан
  • 58 просмотров
Решения вопроса 2
Kozack
@Kozack Куратор тега Vue.js
Свойство должны быть не глобальным, а частью категории
<button @click="cat.show = !cat.show">Добавить денег</button>

<div v-show="cat.show">
  // тут хочется вывести форму добавления денег
</div>
Ответ написан
polyak-888
@polyak-888
Js, React.js, css, frontend
Alex Alex, почти правильно ответил, проблема в том что у тебя один show на все формы, поэтом при клике на одну у тебя раскрываются все. Суть решения в том что ты сделаешь компонент формы и будешь циклом выводить его и тогда у каждой формы будет свой show и, соответственно, открываться будет нужная, а не все
<div v-for="cat in categories" :key="cat.id">
     <app-form :category="cat" /> //тут весь компонент у которого будет свой show
</div>

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

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

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