Load json data for the first time request and to display the same in Home Page
A simple example.
views.py
def articles(request): context { 'articles' : ['a1','a2','a3'] } return render(request, 'articles.html', context)articles.html
{% verbatim %}<div id="app"> <ul> <li v-for="a in articles">{{ a }}</li> </ul></div>{% endverbatim %}<script> new Vue({ el : "#app", data : function(){ return { articles : {{ articles | safe }} } } })</script>Things to watch out for :
- The
verbatimtag to stop Django from rendering the contents of this block tag since Vue uses the same interpolating symbols. - The
safefilter to prevent Django from escaping the contents. - If you are passing a dictionary, consider turning it into JSON first
Generally speaking, prefer passing data to Vue via Ajax