时间戳

首页 > 解决方案 > Vue不显示对象

javascript - Vue不显示对象

问题描述

我有一个 javascript 函数，它使用 chrome api 抓取最后检索到的 10 个关闭的网站，然后将列表简化为带有每个网站的标题和 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 能够正常显示该对象，但它最终什么也没显示

标签： javascriptvue.jsgoogle-chrome-extension

解决方案

尝试通过Vue实例更新数据。

vm.gotLast10 = tempLast10

此外，请确保您getLast10() 在创建Vue.

推荐阅读