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

Question

[Игорь Че]

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

Answer 1

[Александр Шелеметьев]

Используйте тэг

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.
Что-то подобное делал у себя.

Comments

[Игорь Че]

Не удается никак. $parent и $children - это для общения между компонентами, насколько я понял из документации. У меня не разделено на компоненты.
Максимум что удалось, это вот такой страшный метод:

this.$refs.myButton[0].parentElement.children[1].value = '';

Значение в ячейке сбразывается, но в data2 изменений не происхдит.
app.data2[0].monday_from // выводит старое значение.

[Александр Шелеметьев]

Игорь Че: Чтобы изменить значения в app.data2[0].monday_from вам нужно менять не свойства элемента DOM

this.$refs.myButton[0].parentElement.children[1].value = '';

, а само значение переменной:
this.data2[0].monday_from = ''
Так как эта переменная у вас связана с полем input, то содержимое поля тоже очистится.

Например, можно написать так:

<tr v-for="(row, i) in data2" class="row body">
    <td>
        <button 
class="checkbox"
@click="clrRow(i)">x</button>
        <input type="text" v-model="data2[i].wednesday_from">
        <input type="text" v-model="data2[i].wednesday_to">
    </td>
</tr>

а в скрипте:

clrRow (i) {
  this.data2[i].wednesday_from = ''
  this.data2[i].wednesday_to = ''
}

[Игорь Че]

Спасибо. Да, это будет работать. Только не вижу способа очищать поля одним методом. Придется для каждого дня недели писать свой метод.
Сделаю пока так, это хоть и некрасиво, зато быстро.

[Александр Шелеметьев]

Можно в функцию параметр передавать:

<tr v-for="(row, i) in data2" class="row body">
    <td>
        <button 
class="checkbox"
@click="clrRow(i, 'wednesday')">x</button>
        <input type="text" v-model="data2[i].wednesday_from">
        <input type="text" v-model="data2[i].wednesday_to">
    </td>
</tr>

clrRow (i, day) {
  this.data2[i][day + '_from'] = ''
  this.data2[i][day + '_to'] = ''
}

Но лучше подумать, как избавиться от названий дней недели. Например, можно использовать вложенный массив:
data2[i][2].from
тогда и td можно генерить через v-for

[Игорь Че]

Спасибо большое. Так гораздо лучше стало.
А над видом данных нужно еще подумать. Я изначально вообще хотел в таком виде:

spoiler

data: {
                    'monday': [
                        ['16:00', '16:15'],
                        ['18:00', '18:15'],
                        ['20:00', '21:00'],
                    ],
                    'tuesday': [
                        ['16:00', '16:15'],
                        ['18:00', '18:15'],
                        ['20:00', '21:00'],
                    ],
                    'wednesday': [
                        ['16:00', '16:15'],
                        ['18:00', '18:15'],
                        ['20:00', '21:00'],
                    ],
                    'thursday': [
                        ['16:00', '16:15'],
                    ],
                    'friday': [
                        ['16:00', '16:15'],
                    ],
                    'saturday': [
                        ['16:00', '16:15'],
                        ['18:00', '18:15'],
                    ],
                    'sunday': [
                        ['16:00', '16:15'],
                        ['20:00', '21:00'],
                    ],
                    'holiday': [
                        ['16:00', '16:15'],
                        ['18:00', '18:15'],
                    ],
                },

Выглядит логичнее и читабельнее. Но не придумал как заполнить ими таблицу.

[Александр Шелеметьев]

Сделайте массив, который возвращает ['monday','tuesday',...] и используйте его в `v-for` для `td`:
<td v-for="(day, n) in dayOfWeek">
'day' будет содержать наименование дня недели, `n` - порядковый номер. Используйте то или друге, как понадобится

[Игорь Че]

Спасибо. Очень помогли.
Поэкспериментирую.