javascript - 如何在 vuejs 中发出补丁请求并更新使用 v-model 的个人的标记输入
问题描述
您好,我正在使用 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 文件“assessment.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>
每当我单击按钮运行方法 addMarks 时,我都会收到 404 错误请求。我的输入也有问题。每当我为学生输入分数时,相同的分数会出现在其他学生的输入中。由于我是 vuejs 新手并使用 axios 发出补丁请求,因此我需要您对此问题的友好回应。谢谢
解决方案
您在服务器上的路由器是here_is_your_url/:studentId
,但需要从前面到http://localhost:9000/contAssessment/
(没有:studentId
)
推荐阅读
- python-3.x - WinError2 不断弹出这个 python 3.7.3 脚本来删除文件树中的文件,而无需滚动它们
- php - 如果已达到限制,请选择下一个可用日期(PHP 和 MySQL)
- javascript - javascript如果表单值a大于表单值b不起作用
- postgresql - 通过云sql代理连接postgres cloud sql
- c++ - 使用 CMake 构建 project.sln 时发布构建事件错误
- java - 是否可以(如何)使用 spring 数据在同一个项目中使用不同的 ojdbc 驱动程序?
- javascript - 使用 json 从特定键中检索每个值
- java - Java 工具公证流程
- javascript - React-native 搜索栏 - 错误:未定义不是函数('... this.state.books.filter...' 附近)
- reactjs - 间距不适用于卡片网格。包括沙盒