CODEWITHSUNDEEP
djangovue.jsdjango-views
Dran Dev
Dran Dev

Reputation: 519

Render data passed from Django to Vue

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: result from question

Any ideas? Thanks a lot!

Upvotes: 0

Views: 51

Answers (1)

Arslan Butt
Arslan Butt

Reputation: 795

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>

Upvotes: 1

Related Questions