Как удалить соседний элемент?

Хочу при клике на 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>

На jQuery сделал бы как-то так:
$(this).parent('td').children('input').val("");
Как это сделать во Vue?
  • Вопрос задан
  • 327 просмотров
Решения вопроса 1
zoroda
@zoroda
Необычный Fullstack. Ищу интересный стартап.
Используйте тэг
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>

В скрипте можете обратиться к этому элементу:
console.log(this.$refs.myButton.$parent.$children)
Посмотрите в консоли, как добраться до нужных вам свойств.
Впрочем, во Vue вам достаточно обнулить привязанную к `input` переменную.
Дока на русском
ref должны быть уникальными. Их можно генерить динамически, например:
:ref="'buttonClr' + row.id"

P.S.
Что-то подобное делал у себя.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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