How to iterate on array loaded via Ajax with Vue?

Question

<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?

Phil · Accepted Answer · 2017-10-30 23:42:29Z

3

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
  })
}

answered Oct 30, 2017 at 23:42

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to iterate on array loaded via Ajax with Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related