Можете ли вы изменить идентификатор элемента в vue.js?

Question

У меня есть список элементов, содержащихся в массиве javascript. Подобно примерам, найденным в документации vue.js .

Это рабочий процесс, с которым я борюсь:

• Пользователь нажимает «Добавить».
• Я немедленно добавляю элемент в список (в том месте, где его попросили)
• Я отправляю ajax-запрос на сервер для создания элемента.
• Вызов возвращается со строкой базы данных для нового элемента.

Я использую первичный ключ базы данных в качестве моего ключа vue - который я не могу знать до того момента, когда вызов ajax наконец-то возвращается ко мне. Но если я просто обновлю идентификатор объекта, я получу выход из этой строки и вернусь обратно.

Есть ли способ сказать vue, что я меняю ID предмета?

Мой идеальный случай - что-то вроде:

click: function () {
    let item = {
        id: "placeholder id, possibly randomly generated"
    }
    this.array.splice(index, 0, item);
    ajax_call().complete(function (new_id) {
        // item = data.new_id
        vue.update_id_for_object(item, data.new_id)
    })
}

Закомментированная строка вызывает нежелательный переход.

Кто-то проголосовал за то, чтобы закрыть это как дубликат этого вопроса - насколько я могу судить, речь идет о том, как динамически устанавливать идентификаторы, что я уже делал в своем примере. Не стесняйтесь уточнить, как это помогает моей проблеме.

Answer 1

По поведению key предполагается определить уникальность элемента в списке. Таким образом, изменение атрибута key всегда есть и будет представлять другой компонент.

Учитывая это ограничение, у вас есть два варианта. Первый - самый простой с компромиссом - просто отключите анимацию / переходы.

Второй вариант - создать локализованную карту с уникальным идентификатором для каждого существующего и нового элемента. Например,

created() {

    this.counter = 0;
    this.mappedKeys = {};

},

// Consider using this method as part of watcher
// Or API call success method.
modifiedList(list) {

    const newList = list.map((x) => {

        if (!this.mappedKeys[x.id]) {
            this.mappedKeys[x.id] = this.counter++;
        }

        return { ...x, id: this.mappedKeys[x.id] };
    });

    // Render this newList
    return newList;
}

Для вновь добавленного элемента добавьте запись как:

const nextValue = this.counter++;
this.mappedKeys[nextValue] = newValue;

Если вызов ajax успешен, добавьте еще одну запись как:

// draftId is the id created in earlier step.
this.mappedKeys[newItem.id] = draftId;

Это единственное, что вы можете сделать, чтобы сопоставить черновой идентификатор с реальным идентификатором , возвращенным из базы данных / API. Vue.js не может решить эту проблему.

Answer 2

Эта функция на момент написания не поддерживается vuejs.

Я поднял запрос функции для него, что, надеюсь, приведет к его добавлению.

Пока что использование прокси-идентификаторов (как предложено @HarshalPatil) кажется хорошей идеей, но я пропущу этот конкретный проект.

---

РЕДАКТИРОВАТЬ:Мне было сказано недвусмысленно уйти, так что можно с уверенностью сказать, что они не собираются рассматривать эту полезную функциональность.Кажется, единственный способ сделать это - через прокси-метод, описанный выше.