6

I am using Vue.js for the first time. I need to serialize the objects of django

views.py

 def articles(request):
        model = News.objects.all() # getting News objects list
        modelSerialize =  serializers.serialize('json', News.objects.all())
        random_generator = random.randint(1,News.objects.count())    
        context = {'models':modelSerialize, 
                  'title' : 'Articles' , 
                  'num_of_objects' : News.objects.count() , 
                  'random_order' :  random.randint(1,random_generator) ,
                  'random_object' : News.objects.get(id = random_generator ) ,
                  'first4rec' : model[0:4],
                  'next4rec' : model[4:],
                  }
        return render(request, 'articles.html',context)

I have tried to display serialized json data in html its working fine there,

Now , how to intialize json data in vue instance and to access in html using v-repeat attribute.

https://jsfiddle.net/kn9181/1yy84912/

Please can any one help???

light_ray
  • 642
  • 2
  • 11
  • 31
  • from version 1.0+, v-repeat has been removed in favor of v-for. so this might be the problem – Raj Kamal Mar 20 '16 at 17:28
  • Thanks.I had changed to v-for now , but my question related to , how to pass serialized data json to js – light_ray Mar 20 '16 at 17:42
  • i don't know python, but in php we would do things like, `var json = " "` to pass json data as string from php to js. and `var obj = JSON.decode(json);` to get js object. – Raj Kamal Mar 20 '16 at 17:44
  • didnot solve my problem. – light_ray Mar 21 '16 at 08:58
  • take a look at http://stackoverflow.com/questions/1445989/passing-python-data-to-javascript-via-django once you get js object containing data, you can pass the data to `Vue()` – Raj Kamal Mar 21 '16 at 09:20
  • What is your question ? do you want to initialise the blog objects in Vue instance or you want the like buttons to work ? I see two different questions when i look at the Jsfiddle and the bounty – Mevin Babu Apr 03 '16 at 04:34
  • @MevinBabu,First I want to initialise the json objects in vue instance data, then user can like the article which they like. – light_ray Apr 03 '16 at 09:15

1 Answers1

5

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 verbatim tag to stop Django from rendering the contents of this block tag since Vue uses the same interpolating symbols.
  • The safe filter 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

zxzak
  • 8,985
  • 4
  • 27
  • 25