Building a list of form submissions in Django last night was causing me some issues. This is likely a common issue for people and something most people know already, but I wasn’t able to find a nice answer online after my searching, so here’s my solution for others to benefit from.

My scenario:

• Build a list of submissions inside the view
• Pass these into the template, so that Vue could render the details

I could have made the decision to load the page first, then use Axios to get the list of submissions, but I decided aginst that for now.

As such, I had my view setup along these lines:

from django.shortcuts import render
import json
from myapp.models import MyModel

def my_view(request):
    my_models = myModel.objects.all()
    model_list = []
    for model in my_models:
        new_model = {
            'id': model.id,
            'name': model.name,
            'picture': model.picture
        }
        model_list.append(new_model)

    context={
        'models': json.dumps(model_list)
    }

    return render(request, 'my_template.html')

(I would like to use model_to_dict from django.forms.models here but UUIDs don’t work nicely in my scenario…)

My Vue JS:

var models= new Vue(
    {
        el: '#models',
        delimiters: ["[%", "%]"],
        data: {
            models: model_list
        }
    }
);

End of course, the template:

The problem here was though, Django was escaping the JSON string automatically. After doing some googling I found many solutions that said to use the escapejs flag in conjunction with JSON.parse() but I wasn’t satisfied with that.

Django has a tag for disabling the auto-escaping it does though. This allows you to do the following:

<script>

</script>

And voila! Django renders the JSON String in such a way that Javascript can work with it right away, without having to use JSON.parse on it.