I am currently working on a project involving Django, Django REST, and Vue JS. I have successfully managed to retrieve information from the API to the Vue JS frontend. However, I am facing an issue where data is not being posted to the Django database when using the Vue JS frontend to submit a form after clicking the button. I have tried various solutions without success. Any assistance would be greatly appreciated. Thank you.
Below is my Vue code in 'AllNotes.vue':
<template>
<div class="notes_container">
<div class="add_note">
<form v-on:@submit="submitForm">
<div class="form-group">
<label for="content">Content</label>
<input
type="text"
class="form-control"
id="content"
v-model="content"
/>
</div>
<div class="form-group">
<button>Add Note</button>
</div>
</form>
</div>
<div class="note_content">
<h1>Tweets</h1>
<ul class="note_list">
<li v-for="note in notes" :key="note.id">
<p>"{{ note.content }}""</p>
<button @click="toggleNote(note)">
{{ note.completed ? "Undo" : "Complete" }}
</button>
<button @click="deleteNote(note)">Delete</button>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
notes: [],
content: "",
};
},
methods: {
async getData() {
try {
// fetch tasks
axios.get("http://localhost:8000/notes/").then((response) => {
this.notes = response.data;
});
// set the data returned as tasks
} catch (error) {
// log the error
console.log(error);
}
},
},
submitForm: function () {
// Send a POST request to the API
axios
.post("http://localhost:8000/notes/", { note: this.content })
.then((response) => {
this.content = "";
this.notes.push(response.data);
});
// Append the returned data to the tasks array
// Reset the title and description field values.
},
created() {
// Fetch tasks on page load
this.getData();
},
};
</script>
Here is the Django serializer:
from rest_framework import routers, serializers, viewsets
from post.models import *
# Serializers define the API representation.
class NoteSerializer(serializers.HyperlinkedModelSerializer):
#journal_user = serializers.CharField(source="journal_user.username", read_only=True)
class Meta:
model = Note
fields = ['id', 'content', 'publish_date']
Below is my view in Django:
#For our API View.
from rest_framework import viewsets
from post.serializers import NoteSerializer
from rest_framework.parsers import JSONParser
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse, JsonResponse
class NoteViewSet(viewsets.ModelViewSet):
queryset = Note.objects.all()
serializer_class = NoteSerializer
@csrf_exempt
def notes(request):
if request.method == 'GET':
notes = Note.objects.all()
serializer = NoteSerializer(notes, many=True)
return JsonResponse(serializer.data, safe=False)
elif request.method == 'POST':
data = JSONParser().parse(request)
serializer = NoteSerializer(data=data)
if serializer.is_valid():
serializer.save()
return JsonResponse(serializer.data, status=201)
return JsonResponse(serializer.errors, status=400)