Как в Vue/Vuetify 2.x соединить v-data-table с динамическим v-autocomplete?

Question

[Kripto77]

Vue.js 2.x / Vuetify 2.x

Нужна динамическая таблица, чтобы на каждой строчке был v-autocomplete. Отслеживание ввода на нужной строке и аякс-запрос, на основании которого будут манипуляции с текущими данными таблицы.

Пример на Codepen

Проблема в отслеживании по полю :search-input.sync="searchText", при такой привязке вводимый запрос повторяется на всех v-autocomplete, если привязать по текущему итерационному элементу :search-input.sync="item.searchText" не получается отслеживать в watch: { searchText(value, oldValue) {} ) }

Подскажите как привязать к уникальной переменной и отследить изменения при вводе?
Возможно как-то в watch отследить текущий итерационный объект (туда передаются только старое и новое значение, за исключением объектов с опцией deep: true)?

Очень прошу помочь, гугление не помогает, примеры или старых версий или с той же проблемой. Заранее спасибо.

Answer 1

[0xD34F]

https://jsfiddle.net/Ldsh39bc/

Comments

[Kripto77]

Спасибо за ответ, возможно не так вопрос поставил, но нужно отслеживание введенных значений с последующим новым аякс-запросом и изменением текущей строчки таблицы (при необходимости). В вашем варианте единоразово в created сохраняется массив данных и потом по нему идет поиск (этот урл поставил из примеров документации).
Подскажите как в watch (или другим способом) отследить item.searchText, сделать аякс-запрос, выдать список вариантов и по клику юзера изменить текущий итерационный объект item (при необходимости).

[0xD34F]

Kripto77, изменил ответ.

[Kripto77]

0xD34F, спасибо отлично - то что надо, даже лучше чем искал)