How to remove adjacent element?

Question

JavaScript

I want to delete or clear the inputs in the current cell when clicking on button.checkbox.

<tr v-for="row in data2" class="row body">
    <td>
        <button class="checkbox">x</button>
        <input type="text" v-model="row.wednesday_from">
        <input type="text" v-model="row.wednesday_to">
    </td>
</tr>

On jQuery I would do something like this: How to do it in Vue?
$(this).parent('td').children('input').val("");

Answer 1

Use the tag

ref

:

<tr v-for="row in data2" class="row body">
    <td>
        <button 
ref="myButton"
class="checkbox"
@click="clrRow">x</button>
        <input type="text" v-model="row.wednesday_from">
        <input type="text" v-model="row.wednesday_to">
    </td>
</tr>

In the script, you can refer to this element: Look in the console for how to get to the properties you need. However, in Vue, all you need to do is set the variable bound to `input` to zero. Docks in Russian ref must be unique. They can be generated dynamically, for example: :ref="'buttonClr' + row.id" PS I did something similar at home .