Not able to Sumit data from Vue Js to Django Rest - django

Question

I built a web app with Vue js and Django, django rest framework , I am only able to post data from the backend. When I try and fill in the data from the form with vue js nothing posts. here is my code hope someone smart can solve this. Thank you for your help it is appreciated. I followed the tutorial from: https://blog.logrocket.com/how-to-build-vue-js-app-django-rest-framework/
I attempted it twice there may be some code issues with her code. but I am open for anyone to help thank you.
Tasks.vue
<template>
<div class="tasks_container">
<div class="add_task">
<form v-on:submit.prevent="submitForm">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" v-model="title" />
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
class="form-control"
id="description"
v-model="description"
></textarea>
</div>
<div class="form-group">
<button type="submit">Add Task</button>
</div>
</form>
</div>
<div class="tasks_content">
<h1>Tasks</h1>
<ul class="tasks_list">
<li v-for="task in tasks" :key="task.id">
<h2>{{ task.title }}</h2>
<p>{{ task.description }}</p>
<button #click="toggleTask(task)">
{{ task.completed ? "Undo" : "Complete" }}
</button>
<button #click="deleteTask(task)">Delete</button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [],
title: "",
description: "",
};
},
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);
}
},
},
async submitForm() {
try {
// Send a POST request to the API
const response = await this.$http.post(
"http://localhost:8000/api/tasks/",
{
title: this.title,
description: this.description,
completed: false,
}
);
// Append the returned data to the tasks array
this.tasks.push(response.data);
// Reset the title and description field values.
this.title = "";
this.description = "";
} catch (error) {
// Log the error
console.log(error);
}
},
async toggleTask(task) {
try {
// Send a request to API to update the task
const response = await this.$http.put(
`http://localhost:8000/api/tasks/${task.id}/`,
{
completed: !task.completed,
title: task.title,
description: task.description,
}
);
// Get the index of the task being updated
let taskIndex = this.tasks.findIndex((t) => t.id === task.id);
// Reset the tasks array with the new data of the updated task
this.tasks = this.tasks.map((task) => {
if (this.tasks.findIndex((t) => t.id === task.id) === taskIndex) {
return response.data;
}
return task;
});
} catch (error) {
// Log any error
console.log(error);
}
},
async deleteTask(task) {
// Confirm if one wants to delete the task
let confirmation = confirm("Do you want to delete this task?");
if (confirmation) {
try {
// Send a request to delete the task
await this.$http.delete(`http://localhost:8000/api/tasks/${task.id}`);
// Refresh the tasks
this.getData();
} catch (error) {
// Log any error
console.log(error);
}
}
},
created() {
// Fetch tasks on page load
this.getData();
},
};
</script>
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<Tasks />
</div>
</template>
<script>
import Tasks from "./components/Tasks.vue";
export default {
name: "App",
components: {
Tasks,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
// set a prototype for http
Vue.prototype.$http = axios;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
vies.py
# parsing data from the client
from rest_framework.parsers import JSONParser
# To bypass having a CSRF token
from django.views.decorators.csrf import csrf_exempt
# for sending response to the client
from django.http import HttpResponse, JsonResponse
# API definition for task
from .serializers import TaskSerializer
# Task model
from .models import Task
#csrf_exempt
def tasks(request):
'''
List all task snippets
'''
if(request.method == 'GET'):
# get all the tasks
tasks = Task.objects.all()
# serialize the task data
serializer = TaskSerializer(tasks, many=True)
# return a Json response
return JsonResponse(serializer.data,safe=False)
elif(request.method == 'POST'):
# parse the incoming information
data = JSONParser().parse(request)
# instanciate with the serializer
serializer = TaskSerializer(data=data)
# check if the sent information is okay
if(serializer.is_valid()):
# if okay, save it on the database
serializer.save()
# provide a Json Response with the data that was saved
return JsonResponse(serializer.data, status=201)
# provide a Json Response with the necessary error information
return JsonResponse(serializer.errors, status=400)
#csrf_exempt
def task_detail(request, pk):
try:
# obtain the task with the passed id.
task = Task.objects.get(pk=pk)
except:
# respond with a 404 error message
return HttpResponse(status=404)
if(request.method == 'PUT'):
# parse the incoming information
data = JSONParser().parse(request)
# instanciate with the serializer
serializer = TaskSerializer(task, data=data)
# check whether the sent information is okay
if(serializer.is_valid()):
# if okay, save it on the database
serializer.save()
# provide a JSON response with the data that was submitted
return JsonResponse(serializer.data, status=201)
# provide a JSON response with the necessary error information
return JsonResponse(serializer.errors, status=400)
elif(request.method == 'DELETE'):
# delete the task
task.delete()
# return a no content response.
return HttpResponse(status=204)
serializers.py
from rest_framework import routers,serializers,viewsets
from .models import Task
class TaskSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Task
fields = ['id', 'title', 'description', 'completed', 'created_at']