В какой функции прочитать закладки из chrome при использовании vue?

Question

[Алексей Беспалов]

Делаю расширение для chrome с использованием vue. Мне нужно прочитать закладки. Они читаются асинхронно и всегда после того, как выполнится приложение.
Я не смог отловить их в событиях жизненного цикла. Все равно если сделать console.log() то функция получения закладок выполняется самой последней.

Я так понимаю, надо закладки гарантированно прочитать до создания vue или перерендерить компонент, когда они прочитаны. Подскажите, как это сделать?

export default {
  name: 'App',
  components: {
    BkContener
  },
  data () {
    return {
        bookmarks
    }
  },
    methods: {
    getBookmarks(bookmarkTree) {
                chrome.bookmarks.getTree((bookmarkTree) => {
                    console.log('bookmarks tree -> ' + bookmarkTree);
                    console.log(bookmarkTree);    
            }
    }

  },

Comments

[Koteezy]

Почему именно "до создания vue", или обязательно ре-рендер делать? Почему нельзя просто показывать спиннер, пока не получите закладки?

[Алексей Беспалов]

Можно и так. Только я не пойму как это сделать?. Ведь сначало выполняется весь код и только потом возвращается дерево закладок.

[Koteezy]

Алексей Беспалов,

data () {
 return {
     bookmarks: {
        loading: false,
        data: []
     }
},

methods: {
 setBookmarks () {
    this.bookmarks.loading = true;

   chrome.bookmarks.getTree((bookmarkTree) => {
                    this.bookmarks.data = bookmarkTree;
                    this.bookmarks.loading = false;
  }
},

created () {
 this.setBookmarks();
}
}

Как то так

Answer 1

[Алексей Ярков]

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

export default {
  name: 'App',
  components: {
    BkContener
  },
  data () {
    return {
      bookmarks: null
    }
  },
  methods: {
    getBookmarks(bookmarkTree) {
      chrome.bookmarks.getTree((bookmarkTree) => {
        console.log('bookmarks tree -> ' + bookmarkTree);
        console.log(bookmarkTree);
        this.bookmarks = bookmarkTree; // Угадал?
      })
    }
  }
}

Ну и повесьте на корень темплейта директиву:

<div v-if="bookmarks">
    <!-- Остальной темплейт -->
</div>

Comments

[Алексей Беспалов]

Спасибо. Получилось. Почти так же делал, только путался постоянно где надо this, где напрямую. Видать чето не так было.