Hello there, I am currently developing a student assessment input form using vuejs, express, and mongoDB. The backend API is complete and functioning properly when tested with postman. Here is the code:
// UPDATE MARKS
router.patch('/:studentId', async (req, res) => {
try{
const updatedStudent = await Assessment.updateMany({_id: req.params.studentId},
{
$push:
{ homework: req.body.homework,
classtest:req.body.classtest,
projectwork:req.body.projectwork,
exams:req.body.exams },
});
res.json(updatedStudent);
}catch (err) {
res.json({ message: err });
}
});
I am facing challenges integrating it with the vuejs frontend. I have created a JavaScript file 'assessment.js' to handle all requests as shown below;
import axios from 'axios';
const url = 'http://localhost:9000/contAssessment/';
...
// Add Marks
static addMarks(homework) {
return axios.patch(url, {
homework
});
}
}
export default assessmentService;
I have imported it into the marks component form like this;
<template>
<div id="container">
<div
v-for="assessment in assessments"
v-bind:key="assessment._id"
>
<div id="students_marks_info"
v-if="assessment.students.classes===classes"
>
<p> {{assessment.students.name}} </p>
<p> <input type="text" v-model="homework"> </p>
</div>
</div>
<button type="submit" v-on:click="addMarks(homework)">Submit</button>
</div>
</template>
<script>
import assessmentService from '../assessmentService';
export default {
name: 'marksEntryForm',
data() {
return {
assessments: [],
error: '',
classes: '',
homework: []
}
},
async created() {
try {
this.assessments = await assessmentService.getAssessments();
} catch(err) {
this.error = err.message;
}
},
methods: {
async addMarks() {
await assessmentService.addMarks(this.homework);
this.assessments = await assessmentService.getAssessments();
}
}}
</script>
Whenever I click the submit button to run the addMarks method, I receive a 404 bad request. Additionally, I am encountering issues with the input field where marks entered for one student appear in other students' inputs. As a newcomer to vuejs and axios for patch requests, I would greatly appreciate your guidance on resolving these issues. Thank you.