Плагин vue-treeselect. При Delayed Loading подгружаются, но не отображаются Children. В чём может быть проблема?

Question

[IronP]

Использую плагин vue-treeselect для отображения дерева регионов от Гугл.
Для подгрузки подрегионов (children) использую метод Delayed Loading.
По документации проделал такие шаги:
1. Для неподгружаемых данных установил children: null:

mounted() {
    this.regionsRoot[0].children.map((obj) => {
      obj.children = null;
      return obj;
    });
}

2. Добавил :load-options="loadOptions":

<div class="regions-container">
    <treeselect
        v-model="geoLocal"
        :load-options="loadOptions"
        :options="regionsRoot"
        :normalizer="normalizer"
        :multiple="true"
        :placeholder="place"
        :no-results-text="noResults"
        :is-default-expanded="true"
        :default-expand-level="1"
        :always-open="true"
        :search-nested="true"
        :max-height="360"
        :loading-text="loadingText"
    />
</div>

3. Создал метод loadOptions с axios запросом:

loadOptions({ action, parentNode, callback }) {
      console.log(parentNode);
      if (action === LOAD_CHILDREN_OPTIONS) {
        axios('/google_regions/?node=' + parentNode.key, {
          method: 'GET',
        })
          .then((data) => {
            console.log(data);
            parentNode.children = data.data;
            console.log(parentNode.children);
            callback();
        })
          .catch((error) => {
            callback(new Error('Failed to load options: network error.'));
          });
      }

При этом использую normalizer, так как данные приходят с key и title, вместо id и label:

normalizer(node) {
        return {
          id: node.key,
          label: node.title,
        };
      },

Ответ с сервера приходит верный в виде массива объектов. В консоле отображаются правильные данные.


Также правильно children добавляется в parentNode:


Однако отрисовывается неправильно. Не показывает children, а объявляет что их нет: "No sub-options".


Пытался использовать смену ключа для принудительного повторного рендеринга компонента. Получается отобразить children, но с перезагрузкой компонента. Это неудобно и некорректно.

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

Answer 1

[Red_Devi1]

У Вас где-то косяк с реактивностью. Есть подозрение, что при присвоении obj.children = null; у obj нет ключа children - vue его не отслеживает. Используйте $set при маппинге obj. Покажите что находится в this.regionsRoot[0], а ещё лучше - набросайте пример в JSFiddle

Comments

[IronP]

Пример в JSFiddle: https://jsfiddle.net/IronP/fh3ogmdq/17/

Вот, что находится в this.regionsRoot[0]до того как отработает map:

regionsRoot: [
    	{
      children:[
      {
        isLazy: false,
        key: "2900",
        parent_id: "0",
        title: "Kosovo",
      },
      {
        isLazy: true,
        key: "2036",
        parent_id: "0",
        title: "Австралия",
      },
      {
        isLazy: true,
        key:"2040",
        parent_id:"0",
        title:"Австрия",
      },
      ],
        expand: true,
	key: "0",
	parent_id: 0,
	title: "Вcе",
      }
    ],

После обработки выглядит так:

[IronP]

Решил. В моём случае нужно было сделать так:

this.regionsRoot[0].children.map((obj) => {
      this.$set(obj, 'children', null);
      return obj;
    }),

Теперь все реактивно обновляется.
Спасибо огромное Red_Devi1 за правильный вектор!