Как сделать динамически обновляемый v-for в v-slot:body.append?

Question

[Leatington]

Я хочу добавить к каждой колонке в v-data-table поле ввода для кастомного поиска.
Так как колонок очень много, делаю это через v-for.
Почти каждого поля ввода модет быть изменяемая по клику append-icon, она определяет тип поиска по базе данных.
Только вот по клику почему-то ничего не происходит. Помогите, пожалуйста.

<template v-slot:body.append>
  <tr>
    <td v-for="(value, key) in custom.data">
      <v-text-field :label="custom.labels[key]" v-if="(value[1] === null)" v-model="custom.data[key][0]"></v-text-field>
      <v-text-field :append-icon="custom.labels[key][1][value[1]]" :label="custom.labels[key][0]" v-if="(value[1] !== null)" v-model="custom.data[key][0]" @click:append="toggle(key, value)"></v-text-field>
    </td>
    <td :colspan="(filters.data.column.length - Object.keys(custom.data).length)"></td>
  </tr>
</template>

Сам объет "custom" (он находится в директиве data, я пытался сделать его из computed, но ничего не вышло, иконка также не менялась. custom.data - отправляется серверу для поиска, первый аргумент само содержимое, второй это иконка. в custom.labels хранится только та информация, которая нужна для визуального отображения)

custom: {
  data: {
    id: ['', 0],
    ip: ['', null],
  },
  labels: {
    id: ['ID', ['mdi-image-filter-center-focus-strong-outline', 'mdi-image-filter-center-focus-strong', 'mdi-less-than', 'mdi-greater-than']],
    ip: ['IP', null],
  }
},

Функция, которая должна изменять иконку, находится в директиве methods (не обращайте внимание, что она изменяет на 1 (по умолчанию в custom.data она 0, я убрал переключение с 0 до 4 для компактности при тесте)

toggle: function(key, value) {
  this.custom.data[key][1] = 1;
}

Заранее благодарю за помощь.

Answer 1

[Leatington]

Мне удалось решить пробелму сделав custom.data массивом, а не объектом.
Дело в том, что для v-for нужен некое уникальное значение в массиве. чтобы он мог динамически изменять значения.
Теперь массив выглядит так:

data: [
  {data: '', name: 'id', mode: 0},
  {data: '', name: 'version', mode: 0},
  {data: '', name: 'ip', mode: null},
],

Вопрос остаётся открытым: возможно ли оставить как было, но заставить v-for обновлять данные?