Find element in DOM Vue js at click of another | Vue js

Question

The problem where I have encountered difficulties is this. When a button is clicked within a row of the datatable I would like to make only one button appear in that same row. image 1

In this case the input of that row must be opened when the + or - button is clicked.

image 2

I cannot use the v-if with a generic is_visible class set to true otherwise all the inputs of the whole table are opened.

What is the exact and right method to do this. In Jquery I easily got the same result using $this for the selected button?

Answer 1

I would like the input of that row to be shown when the button is clicked. Here is the single line code

<td class=" p-2 d-flex">
                            <v-btn
                                class="mx-2"
                                fab
                                dark
                                small
                                color="primary"
                                @click="showTextField()"
                            >
                                <v-icon dark>
                                    mdi-plus
                                </v-icon>
                            </v-btn>
                            <v-btn
                                @click="showTextField()"
                                class="mx-2"
                                fab
                                dark
                                small
                                color="primary"
                            >
                                <v-icon dark>
                                    mdi-minus
                                </v-icon>
                            </v-btn>


                                <v-text-field
                                    class="mr-2 d-none"
                                    label="Quantity"
                                    type="number"
                                    required>
                                </v-text-field>

   </td>