VueでAjax経由でロードされた配列をどのように反復処理するのですか？

Question

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

このhtmlをレンダリングすると、Ajax呼び出しがまだ進行中です。したがって、content.functionsは使用できません。呼び出しが完了したら、Vue Devtools（chrome）でデータが正しく追加されたことがわかります。 content.functionsが利用可能になるとすぐに、Vueにv-for指令を再度実行させる簡単な方法はありますか？

Answer 1

元のデータを空の配列に設定してから、AJAX呼び出しが完了すると更新してください。例えば

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