How to set a handler for each button in the loop?

Question

JavaScript

Good afternoon, I don’t even know how to formulate the question, so I didn’t find anything in Google. The bottom line is this: I'm making an application in order to help save money for a certain thing. In the loop, I display the existing goals:

<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>

The problem is that if we add

@click=function

button, then when clicked, all forms will be displayed at once, if, for example, there are 2 or more goals to accumulate.
Below is a picture of how it works now:

And here is what happens if you click on any Add button:

Do not pay attention to other fields, I will fix it later. The main thing is how to call your target exactly your form? The form is connected as a component

Answer 1

// Задаём $(), связанный с нужной таблицей
// table = $('table...')

function handleEachTr() {
    tr = $(this);
    if (tr.find('td:nth-child(6)> div:nth-child(3):contains("[+0]")').size() !== 0) {
        tr.hide();
    }
}

// ...

table.find('tr').each(handleEachTr);

// компактно (для разового применения)

table.find('tr').each(function () {tr = $(this); if (tr.find('td:nth-child(6)> div:nth-child(3):contains("[+0]")').size()) tr.hide()});

// модно
table.find('tr').each((i, e) => {tr = $(e); tr.find('td:nth-child(6)> div:nth-child(3):contains("[+0]")').size() ? tr.hide() : 0});

// ещё моднее
table.find('tr').each((i, tr) => {$(tr).find('td:nth-child(6)> div:nth-child(3):contains("[+0]")').size() ? $(tr).hide() : 0});

Answer 2

if(elem.includes('[+0]')
//через jquery найдите tr и задайте display none

Answer 3

Alex Alex , answered almost correctly, the problem is that you have one show for all forms, so when you click on one, all of them are revealed. The essence of the solution is that you will make a form component and display it in a loop, and then each form will have its own show and, accordingly, the necessary one will open, and not all

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

Of course, you can also use event.target or ref, but as for me, this will already be a crutch, not the most elegant solution