post Laravel and VUEJS - php

Question

i´m traying initiate with vueJS and i´m doing a aplication that update a register of my DB but always returned a 405 error in my web browser console. I´m trying send my token in request axios, and i think that is my problem, because with ajax always have to send token in the header petition. this is my actual code vueJS, HTML and route Laravel.
thanks
VUEJS
require('./bootstrap');
window.Vue = require('vue');
Vue.component('usuarios-component', require('./components/usuariosComponent.vue').default);
// inicio de VUE
const app = new Vue({
el: '#contenedorVue',
data:{
id: '',
nombreUsuario: '',
email: '',
password: '',
direccion: '',
token: '',
arrayTasks:[],
},
methods: {
enviar(){
let url = '/actualizarDatos';
axios.post(url, {
id: this.id,
nombreUsuario: this.nombreUsuario,
email: this.email,
password: this.password,
direccion: this.direccion,
token: this.token,
}).then(function(response){
this.arrayTasks = response.data;
}).catch(function(error){
console.log(error);
})
}
}
});
HTML
#extends('layouts.app')
#section('content')
#include('layouts.sidebar')
<!-- SE ESTABLECE V-MODEL para usarlo con vue, es como el ID -->
<div id="contenedorVue">
<div class="d-flex flex-row justify-content-center">
<form method="post">
<input type="hidden" v-model="token" value="{{csrf_token()}}">
<div class="form-row">
<div class="col">
<label for="email">Nombre</label>
<input type="text" class="form-control" v-model="nombreUsuario" value="{{$usuario->nombre}}">
</div>
<div class="col">
<label for="email">Email</label>
<input type="email" class="form-control" v-model="email" aria-describedby="emailHelp" value="{{$usuario->email}}">
</div>
</div>
<div class="form-row">
<div class="col">
<label for="password">Contraseña</label>
<input type="password" class="form-control" v-model="password" value="{{$usuario->password}}">
</div>
</div>
<div class="form-row">
<div class="col">
<label for="direccion">Direccion</label>
<textarea v-model="direccion" class="md-textarea form-control" rows="3">
{{$usuario->direccion}}
</textarea>
<input type="hidden" value="{{$usuario->id}}" v-model="id">
</div>
</div>
<!-- EMPEZAMOS LA FUNCIONALIDAD CON VUE DE ESTA MANERA LE DAMOS FUNCIONALIDAD AL BOTON-->
<button class="btn btn-primary mt-5" #click="enviar">Actualizar</button>
</form>
</div>
</div>
#endsection
CONSOLE ERROR
1:1 POST http://www.bonos.local/datosPersonales/1 405 (Method Not Allowed)
error post laravel
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The POST method is not supported for this route. Supported methods: GET, HEAD.
ROUTES
Route::get('/datosPersonales/{id}', 'HomeController#datosPersonales')->name('datosPersonales');
Route::post('/actualizarDatos', 'UsuariosController#actualizarDatosPersonales')->name('actualizarDatosPersonales');
image
image 2

Answer 1

you need to prevent default submit form
<form method="post">
to
<form #submit.prevent="enviar">
<button class="btn btn-primary mt-5" type="submit">Actualizar</button>
</form>
here button need to have type="submit" so once you click that button it will submit form
here post and get will handel in enviar() function
ref link https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Answer 2

it´s essential to do
npm run watch
or
npm run dev
for all changes be appliead... sorry for my numb