Vue не показывает объект

Question

У меня есть функция javascript, которая захватывает 10 последних найденных закрытых веб-сайтов с API-интерфейсом Chrome, а затем упрощает список в массив объектов с заголовком и URL-адресом каждого веб-сайта.Vue прекрасно отображает этот массив объектов, когда я сам его инициализирую, однако он не работает при попытке использовать функцию для получения массива.Почему Vue ничего не показывает?

Как уже говорилось ранее, я попытался инициализировать массив объектов самостоятельно и не испытывал проблем с его отображением.Однако настройте его так, чтобы перед рендерингом Vue функция генерации массива еще не решала проблему.

var gotLast10;

function getLast10() {
  chrome.sessions.getRecentlyClosed({}, function (results){
    if (results.length > 10){
      results = results.slice(0, 10);
        var tempLast10 = [];
        results.forEach(
          function(eachSite) {
            var tempObject = { TITLE: eachSite.tab.title, URL: eachSite.tab.url}
            tempLast10.push(tempObject);
            gotLast10 = tempLast10;
          }
        );
    }
    });
    console.log(gotLast10);
}

$(document).ready(    
  function() {
    getLast10();
    vm = new Vue({
      el: '#app',
      data: {
        gotLast10: gotLast10,
      }
    });
  }
);
        <div id=app>
          {{ gotLast10 }}
        </div>

Я ожидал, что Vue отобразит объект нормально, но он просто завершаетсяничего не отображается

Answer 1

Попробуйте обновить данные с помощью экземпляра Vue.

vm.gotLast10 = tempLast10

Кроме того, убедитесь, что вы набрали getLast10() после , когда вы создаете Vue.