Множественный выбор в Select2 для VueJS. Иногда возвращаем пустое выделение - PullRequest
Новая
       6

Множественный выбор в Select2 для VueJS. Иногда возвращаем пустое выделение

0 голосов
/ 18 января 2020

Здесь Select2.vue источник: https://pastebin.com/zKvaaDS9

Здесь ItemDetail.vue Источник страницы: https://pastebin.com/gL7a75hH

Я использую select2 в VueJS, который я создал на основе VueJS документации и других ресурсов. Кажется, все работает нормально. Но иногда tag или selected не выбирает правильный, который после отладки я иногда обнаруживаю undefined, [] или '' (пусто).

Я очень подозреваю, что это связано с асинхронностью c. Вот что я хочу заархивировать: я хочу показать все юниты, которые поддерживают предмет.

  1. AJAX: api для получения юнитов
  2. AJAX: api для получения предмета подробно. Элемент данных, включая текущие единицы измерения, поддерживающие этот элемент.
  3. Загрузка модулей select2 на основе item.units и units. Иногда это мелочь, а иногда нет.

Вот некоторые объяснения того, что я делаю 

// Calling item detail(ASYNC)
// api/item/detail/:id
var item = getItemDetail()

// Calling ajax units(ASYNC)
// api/category?group_by=units
var units = getUnits();

Надеюсь, что select2 type=tags будет правильно отображаться на основе item.units (для v-модели) и единиц измерения, доступных в раскрывающееся меню.

Кажется, что не отображается правильно, когда:

  1. Select2 отображает без параметров и значения (ajax не завершено для item и units)
  2. AJAX Item fini sh first
  3. AJAX Units fini sh last

Когда я отлаживаю, кажется, что select2 updated v-модель с пустым значение, потому что в выбранных элементах со значением v-модели ничего не совпадает. Например: 

item.units = [1,2,3];
units = []; // Because not ready yet

$(this.$el).val(); // Return empty array or something

Я попытался исправить порядок следующим образом:

  1. Визит Select2 без параметров и значения (ajax не завершено для item и units)
  2. AJAX Конечные единицы sh последние, ждут до конечных sh и go до шага 3
  3. AJAX Элемент конечных sh первый

Это прекрасно работает.

Вопрос в следующем: Можно ли запустить asyn c и отрендерить select2 без необходимости думать о ajax порядке или ждать, пока компиляция будет первой?

1 Ответ

0 голосов
/ 18 января 2020

Я думаю, что вы можете решить эту проблему двумя способами.

  1. Вы можете сохранить значение в отдельном свойстве вашего компонента оболочки select2, когда параметры изменились, убедитесь, что вы применили свое значение к select2. , Таким образом, даже если select2 устанавливает значение пустым, вы сбросите исходное значение после того, как ajax закончит загрузку.
  2. Когда значение изменится, и у select 2 не будет загружено ни одного параметра, создайте один параметр, чтобы он выиграл ' t установить значение пустым. Когда ваши опции закончат загрузку sh, он заменит все элементы из select2 на ajax загруженные. 
// Option 2: this would go inside Watch for value property
// Note that this works for a single select, for tags, the idea is the same 
// but you will have to create all the tags.
const select = $(this.$refs.select2);
if (select.find(`option[value="${value}"]`).length === 0) {
        select.append(
          $("<option>")
            .val(value)
            .text(this.displayText || "")
        );
      }

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

...