CODEWITHSUNDEEP
javascriptajaxvue.js
Federico Days
Federico Days

Reputation: 101

How to iterate on array loaded via Ajax with Vue?

<div class="recipe-ingredients__container__functions paddings">
    <h5>Functions_</h5>
    <div class="foo" v-for="f in content.functions"></div>
</div>

When Vue render this html the Ajax call is still in progress so content.functions is not available. After call is complete I can see with Vue Devtools(chrome) that data has been correctly added. Is there a easy way to force Vue to execute again the v-for directive as soon as content.functions becomes available?

Upvotes: 1

Views: 44

Answers (1)

Phil
Phil

Reputation: 164729

Simply set your original data to an empty array then update it when the AJAX call completes.

For example

data () {
  return {
    content: {
      functions: []
    }
  }
},
created () {
  makeAjaxRequest().then(data => {
    this.content.functions = data
  })
}

Upvotes: 3

Related Questions