Мне нужно загрузить данные из REST API на front-end, используя фреймворк vue.js, но не используя vue.js cli.

Я пытаюсь получить данные из rest api с помощью vue.js. Но это не работает, я начал изучать vue.js только сейчас, я пытался реализовать много логики, но все равно это не дает соответствующего вывода.

Вот мой views.py file

    # Create your views here.

    class TaskViewSet(ModelViewSet):


      renderer_classes = [TemplateHTMLRenderer]
      template_name = 'templates/list.html'

      def list(self,request):
        queryset = Task.objects.all()
        serializer = TaskSerializer(queryset,many=True)

        context = {
          'serializer' : serializer.data
        }
        return Response(context)

Вот мой list.html файл 

    <!DOCTYPE html>
    <html lang="en">
      {%load static%}
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js" 
    integrity="sha256-Gs0UYwrz/B58FsQggzU+vvCSyG/pewemP4Lssjzv8Ho=" 
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue- 
    resource.min.js" integrity="sha256-OZ+Xidb5+lV/saUzcfonHJQ3koQncPy0hLjT8dROdOU=" 
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue- 
    resource.min.js" integrity="sha256-OZ+Xidb5+lV/saUzcfonHJQ3koQncPy0hLjT8dROdOU=" 
    crossorigin="anonymous"></script>

    <title>Document</title>
    </head>
    
    <body>
      <h3>Tasks Display Here</h3>

      <div  id="app" v-for="task in tasks">
          {{task.data}}
      </div>


      <script>

         var app = new Vue({
         el : '#app',
         data:{
        
            tasks : []
         }
      },
      methods : {
        async getData(){
            try {
                // fetch tasks
                const response = await 
                this.$http.get('http://localhost:8000/api/tasks/');
                // set the data returned as tasks
                this.tasks = response.data; 
            } catch (error) {
                // log the error
                console.log(error);
            }
        
      },
      },
      created(){
          this.getData();
      }
   }


   </script>

   </body>
   </html>

Я указал url своего API, откуда извлекаются данные, но все равно скрипт vue.js не может собрать данные из api. Я действительно запутался, что на самом деле происходит в моем коде. Если я пытаюсь вывести данные в консоль с помощью console.log(), то все равно возвращается обычная консоль.

Вернуться на верх