Как в v-treeview сделать корневой элемент постоянно открытым?

Question

[Эдуард Валеев]

Есть вот такое вот дерево:

<v-treeview
            v-model="selection"
            :search="search"
            :active.sync="active"
            :open="otkrytie"
            dense selectable activatable hoverable            
            :items="treeitems"
            item-disabled="locked"
            color="warning"
            selection-type="independent"
            selected-color="red" />

У него всего лишь один элемент верхнего уровня:


Мне непонятно, что я должен записать в массив otkrytie: [], чтобы элемент самого верхнего уровня всегда был открытым?

Answer 1

[0xD34F]

data: () => ({
  opened: [],
  ...
}),
watch: {
  opened: {
    immediate: true,
    handler(val) {
      const id = this.treeitems[0].id;
      if (!val.includes(id)) {
        val.push(id);
      }
    }
  },
  ...
},

:open.sync="opened"

Comments

[Эдуард Валеев]

Не сработало.
У меня есть подозрение, что в момент выполнения этого кода - данные в дерево еще не подгрузились. Потому как они приходят из бекэнда

init() {      
          this.$store
          .dispatch("project/getCategoriesTree")
          .then(() => {
              this.treeitems = this.$store.state.project.categories.categories;        
          })
      },

то есть когда мы пытаемся взять this.treeitems[0] в блоке watch() - он в отладчике выкидывает undefined

но после подгрузки дерева (по клику на тестовую кнопку) - this.treeitems[0].id показывает единицу (то, что нужно)...

только непонятно, какое событие отвечает за окончание подгрузки данных в дерево, чтобы Ваш код повесить на окончание этого события...

[0xD34F]

Эдуард Валеев, уберите немедленное срабатывание наблюдателя, а treeview пусть рендерится только когда данные есть.

UPD. https://jsfiddle.net/1uv2zko4/