Render data passed from Django to Vue - django

Question

I get my data through axios with this:
get_questions: function (){
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.post('{% url 'sw_app:api_get_questions' %}', this.test)
.then(response=>{
this.questions = response.data.questions
console.log(response.data.questions)
})
}
Here's the view function:
def do_get_questions(request):
data = json.loads(request.body.decode('utf-8'))
test_code = data['code']
is_owner = check_test_owner(request, test_code)
response = {}
if is_owner:
# Get Questions
questions = models.Question.objects.filter(test__code=test_code)
ser_questions = serializers.serialize('json', questions)
response['result'] = 'ok'
response['message'] = 'Questions fetched!'
response['questions'] = ser_questions
return JsonResponse(response)
else:
response['result'] = 'failed'
response['message'] = 'You are not the owner of this test!'
return JsonResponse(response)
It returns this:
[{"model": "sw_app.question", "pk": 2, "fields": {"test": 40, "content": "What is the phrase that beginner coders commonly use to display a string on the screen?"}}]
models.py for reference:
class Question(models.Model):
test = models.ForeignKey(Test, on_delete=models.CASCADE)
content = models.CharField(max_length=900)
def __str__(self):
return "Question: {} - Test: {}".format(self.id, self.test.id)
Back in my vue (template), I store the questions here:
data: {
test: {
code: '',
},
questions: {}
},
Now when I do this:
<li class="list-group-item" v-for="question in questions" :key="question.pk">
[[ question.content ]]
</li>
It just display a lot of empty list objects. When I try doing this:
<li class="list-group-item" v-for="question in questions" :key="question.pk">
[[ question]]
</li>
It displays this:
Any ideas? Thanks a lot!

Answer 1

Suppose you have 2 questions so we can show them using v-for.
const app = new Vue({
data() {
return {
test: {
code: '',
},
questions: [{"model": "sw_app.question1",
"pk": 1,
"fields": {
"test": 40, "content": "Content for question 1"
}
},
{"model": "sw_app.question2",
"pk": 2,
"fields": {
"test": 40, "content": "Content for question 2"
}
}
],
}
},
})
app.$mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<li class="list-group-item" v-for="question in questions" :key="question.pk">
{{ question.pk}} - {{ question.fields.content }}
</li>
</div>