Blade to Vue user profile for laravel-vue

Question

They asked me to change all the pages from blade to vuejs, I started with the user profile (Profile.vue) but I don't have idea how to send the PUT requests with Axios for this case. Can you guide me to create the code for the updateUser () method?

Route (web.php)

Route::put('/dashboard/profile', 'UserController@myProfile');

myProfile (UserController)

public function myProfile(Request $request)
{
    $this->validate($request, [
            'firstname' => 'required|min:3|max:15',
            'lastname' => 'min:2|max:15',
            'gender' => 'numeric',
            'description' => 'max:200',
    ]);
    $userFind = User::find(Auth::user()->id);

    $userFind->firstname = $request->firstname;
    $userFind->lastname = $request->lastname;
    $userFind->gender = $request->gender;
    $userFind->description = $request->description;

    if($user->update())
        return response()->json([
                'status' => 'success',
                'msg' => 'Datos actualizados correctamente.',
                'cod' => 200
            ]);
     else {
          return response()->json([
                'status' => 'error',
                'msg' => 'Ocurrio un error al actualizar la información.',
                'cod' => 422
            ]);
        }
 }

Sidebar Menu (sidebar.blade.php)

<profile-component auth="{{ Auth::user()->toJson() }}"></profile-component>

Profile Component (Profile.vue)

<template>
   <div>
<form v-on:submit.prevent="updateUser" class="form-horizontal form-material">
     <div class="form-group">
          <label class="col-md-12">Nombre</label>
          <div class="col-md-12">
              <input type="text" value="" name="firstname"
                 class="form-control form-control-line"
                 v-model="user.firstname">
          </div>
      </div>
      <div class="form-group">
         <label class="col-md-12">Apellido</label>
         <div class="col-md-12">
            <input type="text" value="" name="lastname"
                class="form-control form-control-line"
                v-model="user.lastname">
         </div>
      </div>
      <div class="form-group">
          <label class="col-sm-12">Genero</label>
          <div class="col-sm-12">
               <select class="form-control form-control-line"
                v-model="user.gender">
                  <option>Seleccionar...</option>
                  <option value="1">Femenino</option>
                  <option value="2">Masculino</option>
                  <option value="3">Otra orientación</option>
                </select>
          </div>
       </div>
       <div class="form-group">
           <label class="col-md-12">Sobre mi</label>
           <div class="col-md-12">
               <textarea rows="5" class="form-control form-control-line"
                  name="description" v-model="user.description"></textarea>
           </div>
        </div>
        <div class="col-sm-12">
           <button class="btn btn-success" type="submit">Actualizar</button>
        </div>
     </form>
   </div>
</template>
<script>
 import moment from "moment";
 export default {
   props: ['auth'],
   data() {
      return {
         user: {},
      }
  },
  mounted() {
    this.user = JSON.parse(this.auth);
  },
  methods: {
    updateUser(){
        let config = {
            headers: {'Content-Type': 'multipart/form-data'}
        };
        const value = {
            'id': this.user.id,
            'firstname': this.user.firstname,
            'lastname': this.user.lastname,
            'gender': this.user.gender,
            'description': this.user.description,
        } 
        let url = '/dashboard/profile'
        axios.put(?????????????????????????????????????
                ???????????????????????????????????????
                ???????????????????????????????????????
                ???????????????????????????????????????)
            .then((response) => {
                ?????????????????????????????????????
                ?????????????????????????????????????
            })
            .catch((response) => {
                console.log(response);
            })
    }
},
filters: {
    moment: function(date) {
        return moment(date).format("D [de] MMMM [de] YYYY ");
    }
}

}

Any idea how I can create the updateUser() method?

I occupy Laravel 5.6, Vuejs 2 and Axios

Answer 1

Include the token in your page header, like so: <meta name="csrf-token" content="{{ csrf_token() }}">, or you can pass it directly into the method: axios.put('/dashboard/profile', { put list of params here, including _token })