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

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

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

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

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

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

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

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)
    })
}

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

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

Источник

2 ответа

Решение

По поведению 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 не может решить эту проблему.

Источник

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

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

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

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

Источник
Другие вопросы по тегам