I’m using a Vue form to send data to a link and retrieve it from back.
The Problem is that the request fails to send data , showing POST http://localhost:8080/ 404 (Not Found), and i’m trying to properly send the data, using fetch or axios.
Here’s my Vue form with the script
<template>
<div class="ui left aligtned container">
</div>
<h1 class="ui teal header" >Gestion d'utilisateurs</h1>
<div class="ui relaxed divided list">
<form class="ui form" @submit.prevent="SubmitForm">
<h4 class="ui dividing header">User modificaiton</h4>
<div class="field">
<div class="two fields" v-for="user in users" :key="user.id">
<div class="field">
<label align="left" >Nom</label>
<!-- <input type="text" name="nom" placeholder="Nom" v-bind:value="user.name" > -->
<input type="text" name="nom" placeholder="Nom" v-model="form.nom" >
</div>
<div class="field" v-for="user in users" :key="user.id">
<label align="left">Prénom</label>
<!-- <input type="text" name="Prenom" placeholder="Prénom" v-bind:value="user.lastname"> -->
<input type="text" name="Prenom" placeholder="Prénom" v-model="form.prenom">
</div>
</div>
<div class="field" v-for="user in users" :key="user.id">
<label align="left">Hiérarchie</label>
<div class="fields">
<div class="four wide field">
<!-- <input type="text" name="hierarchie" placeholder="Hiérarchie" v-model="user.role"> -->
<input type="number" name="hierarchie" placeholder="Hiérarchie" v-model="form.role" ref="hInput">
<button >Update </button>
<a class="ui button">Cancel</a>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
users:[],
form: {
nom: '',
prenom: '',
role: '',
}
};
},
methods:{
SubmitForm(){
console.log('Nom: ' + this.form.nom);
console.log('Prénom: ' + this.form.prenom);
console.log('Hiérarchie: ' + this.form.role);
axios.post('/', this.form).then(
console.log('2'));
} ,
},
mounted()
{
axios.get('http://localhost:8081/api/v1/users/6')
.then(response => {(console.log(response.data))
this.users=response.data;
return response.name
});
},
};
</script>as shown here i declare a form that contains values I want to send, then I send this form on the HTTP request