I am in the process of developing a student management system that provides me with a comprehensive list of students, their individual details, and a feature within the "StudentDetails" component that enables me to navigate to another component. Below are the relevant code snippets:
Vue Router :
import Vue from "vue";
import VueRouter from "vue-router";
import StudentList from "@/components/ListaAlunos.vue";
import HomeComp from "@/views/HomeComp.vue";
import AdicionarNota from "@/views/AdicionarNota.vue";
import DetalhesEstudante from "@/components/StudentCard.vue";
import AdicionarAluno from "@/views/StudentRegister.vue";
Vue.use(VueRouter);
export default new VueRouter({
mode: "history",
routes: [
{
path: "/",
name: "home",
component: HomeComp,
},
{
path: "/student-list",
name: "studentList",
component: StudentList,
},
{
path: "/estudantes/:id",
name: "detalhesEstudante",
component: DetalhesEstudante,
},
{
path: "/detalhes-estudante-nota/:id",
name: "adicionarNota",
component:...
Student List Component :
<template>
<div>
<ul>
<li v-for="estudante in estudantes" :key="estudante.id">
<q-btn square color="grey"
><router-link
:to="{ name: 'detalhesEstudante', params: { id: estudante.id } }"
>{{ estudante.nome }}</router-link
>
</q-btn>
</li>
</ul>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
computed: {
...mapGetters(["estudantes"]),
...mapState(["estudantes"]),
},
async created() {
await this.$store.dispatch...
Student Card ( Student Details ) Component :
<template>
<div>
<div v-if="estudanteAtual">
<h1>{{ estudanteAtual.nome }}</h1>
<p>Média: {{ media }}</p>
<p>Maior Nota: {{ maiorNota }}</p>
<p>Menor Nota: {{ menorNota }}</p>
<p>Quantidade de Provas: {{ quantidadeProvas }}</p>
...
AdicionarNota (addMark component) :
<template>
<div>
<h1>Adicionar Nota</h1>
<form @submit.prevent="adicionarNota">
<label>
Nota:
<input type="number" v-model="nota" required />
</label>
<button type="submit">Adicionar</button>
</form>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
props: {
id: {
type: [Number, String],
required: true,
...
Axios Service :
import axios from "axios";
const API_URL = "http://localhost:8080/estudantes";
class EstudanteService {
// Criar um estudante
...
Vuex :
import EstudanteService from "../services/StudentService.js";
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
...
Could someone assist me in resolving this stack error and building the AddStudent Component?