0

I have a javascript function that grabs the 10 last retrieved closed websites with a chrome api, and it then simplifies the list into an array of objects with the title, and url of each website. Vue is displaying this array of objects fine when I initialize it myself, however it does not work when trying to use the function to get the array. Why isn't Vue showing anything?

As previously said, I have tried initializing the array of objects myself and have had no issues with displaying it like that. However setting it up so that before the Vue is rendered, the function to generate the array is run will still not solve the issue.

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>

I expected Vue to display the object normally, but it just ends up displaying nothing

Anthony Simao
  • 1
  • 1
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – wOxxOm May 26 '19 at 16:07
  • 1
    Chrome API is asynchronous so you should use the result to update the state **inside** the callback. – wOxxOm May 26 '19 at 16:08

1 Answers1

0

Try updating the data through the Vue instance.

vm.gotLast10 = tempLast10

Also, make sure you call getLast10() after your create your Vue.

Steven Spungin
  • 27,002
  • 5
  • 88
  • 78