title: Blade to Vue user profile for laravel-vue
body: <p>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?</p>
  
  <p>Route (web.php)</p>
  
  <pre><code>Route::put('/dashboard/profile', 'UserController@myProfile');
  </code></pre>
  
  <p>myProfile (UserController)</p>
  
  <pre><code>public function myProfile(Request $request)
  {
      $this-&gt;validate($request, [
              'firstname' =&gt; 'required|min:3|max:15',
              'lastname' =&gt; 'min:2|max:15',
              'gender' =&gt; 'numeric',
              'description' =&gt; 'max:200',
      ]);
      $userFind = User::find(Auth::user()-&gt;id);
  
      $userFind-&gt;firstname = $request-&gt;firstname;
      $userFind-&gt;lastname = $request-&gt;lastname;
      $userFind-&gt;gender = $request-&gt;gender;
      $userFind-&gt;description = $request-&gt;description;
  
      if($user-&gt;update())
          return response()-&gt;json([
                  'status' =&gt; 'success',
                  'msg' =&gt; 'Datos actualizados correctamente.',
                  'cod' =&gt; 200
              ]);
       else {
            return response()-&gt;json([
                  'status' =&gt; 'error',
                  'msg' =&gt; 'Ocurrio un error al actualizar la información.',
                  'cod' =&gt; 422
              ]);
          }
   }
  </code></pre>
  
  <p>Sidebar Menu (sidebar.blade.php)</p>
  
  <pre><code>&lt;profile-component auth="{{ Auth::user()-&gt;toJson() }}"&gt;&lt;/profile-component&gt;
  </code></pre>
  
  <p>Profile Component (Profile.vue)</p>
  
  <pre><code>&lt;template&gt;
     &lt;div&gt;
  &lt;form v-on:submit.prevent="updateUser" class="form-horizontal form-material"&gt;
       &lt;div class="form-group"&gt;
            &lt;label class="col-md-12"&gt;Nombre&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
                &lt;input type="text" value="" name="firstname"
                   class="form-control form-control-line"
                   v-model="user.firstname"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
           &lt;label class="col-md-12"&gt;Apellido&lt;/label&gt;
           &lt;div class="col-md-12"&gt;
              &lt;input type="text" value="" name="lastname"
                  class="form-control form-control-line"
                  v-model="user.lastname"&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="col-sm-12"&gt;Genero&lt;/label&gt;
            &lt;div class="col-sm-12"&gt;
                 &lt;select class="form-control form-control-line"
                  v-model="user.gender"&gt;
                    &lt;option&gt;Seleccionar...&lt;/option&gt;
                    &lt;option value="1"&gt;Femenino&lt;/option&gt;
                    &lt;option value="2"&gt;Masculino&lt;/option&gt;
                    &lt;option value="3"&gt;Otra orientación&lt;/option&gt;
                  &lt;/select&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="form-group"&gt;
             &lt;label class="col-md-12"&gt;Sobre mi&lt;/label&gt;
             &lt;div class="col-md-12"&gt;
                 &lt;textarea rows="5" class="form-control form-control-line"
                    name="description" v-model="user.description"&gt;&lt;/textarea&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12"&gt;
             &lt;button class="btn btn-success" type="submit"&gt;Actualizar&lt;/button&gt;
          &lt;/div&gt;
       &lt;/form&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
   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) =&gt; {
                  ?????????????????????????????????????
                  ?????????????????????????????????????
              })
              .catch((response) =&gt; {
                  console.log(response);
              })
      }
  },
  filters: {
      moment: function(date) {
          return moment(date).format("D [de] MMMM [de] YYYY ");
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p></p>
  
  <p>Any idea how I can create the updateUser() method?</p>
  
  <p>I occupy Laravel 5.6, Vuejs 2 and Axios</p>