Как сделать запрос на исправление в vuejs, а также обновить ввод меток для людей, использующих v-модель

Question

Здравствуйте, пожалуйста, я работаю над формой ввода оценки учащихся, используя vuejs, express и mongoDB. Я закончил с бэкэнд-API, и он работает нормально, используя почтальон для тестирования. Ниже приведен код.

// 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 });
    }
});

Я не могу заставить его работать с интерфейсом vuejs. Я создал JavaScript файл 'испытание. js', чтобы выполнить весь запрос, как показано ниже;

import axios from 'axios';

const url = 'http://localhost:9000/contAssessment/';
   ...
    // Add Marks
    static addMarks(homework) {
        return axios.patch(url, {
            homework
        });
    }
}

export default assessmentService;

Я импортировал его в форму компонента меток, как показано ниже;

<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>

Я получаю 404 неверных запроса каждый раз, когда нажимаю на кнопку, чтобы запустить метод addMarks. У меня также есть проблема с вводом. Каждый раз, когда я ставлю оценки ученику, такие же оценки появляются и на входах других учеников. Пожалуйста, мне нужен ваш добрый ответ по этому вопросу, так как я новичок в vuejs и использую ax ios для запроса патча. Спасибо

Answer 1

Ваш маршрутизатор на сервере here_is_your_url/:studentId, но по требованию с фронта на http://localhost:9000/contAssessment/ (не имеет :studentId)