Update user profile Vue-Laravel

3

I have to do the view to update user profile in Vuejs, the view is currently done in blade and it works fine, but I have to pass everything to Vuejs.

From the sidebar.blade.php I pass the user to the Vue component named Profile.vue

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

The data I collect in the template of the Profile.vue component and they are shown in the text boxes of the form with v-model.

<template>
   <div class="row">
     <form  class="form-horizontal form-material">
       <div class="form-group">
         <label class="col-md-12">Nombre</label>
           <div class="col-md-12">
             <input type="text" class="form-control form-control-line"
               v-model="auth.name">
             </div>
           </div>
           <div class="form-group">
             <label class="col-md-12">Apellido</label>
               <div class="col-md-12">
                 <input type="text" class="form-control form-control-line"
                   v-model="auth.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">
                  <option>Femenino</option>
                  <option>Masculino</option>
                  <option>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"
                 v-model="auth.description">
                </textarea>
              </div>
            </div>
          <div class="col-sm-12">
            <button class="btn btn-success" 
              v-on:click="editUser()">Actualizar
            </button>
          </div>
      </form>
    </div>
</template>
<script>
 export default {
 props: ['auth'],
 data() {
    return {
        user: {
            firstName: '',
            lastName: '',
            gender: '',
            descriptionUser: ''
        },
    }
},
methods: {
    editUser(){

    }
},
filters: {
    moment: function(date) {
        return moment(date).format("D [de] MMMM [de] YYYY ");
    }
}

}

These are the arvhico routes we.php

Route::get('/panel/profile', '[email protected]');
Route::put('/panel/profile', '[email protected]');

How can I do it with the Vuejs view?

I need to create the editUser () method

I confuse the subject because I have little with Vue, I'm using Laravel 5.6, Vuejs 2 and Axios.

Thank you very much

    
asked by Felipe 12.04.2018 в 21:17
source

1 answer

2

Simple, instead of using :auth="{{ Auth::user() }}" , be sure to remove the : points, and in this way you will be specifying to html that auth is just one more property of the element within the DOM; It will also be necessary to transform the user to type JSON when passing it to the property:

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

Problem within the Vue component

You will realize that even doing this will not work your component and that is because Vue will interpret the value of the property auth as a string, there are many ways to solve this, I'll go for the simplest. In order to solve the property problem, it will be necessary to transform the data at some point of the component's life cycle and add it to a new data, an example could be:

<script>
export default {
  props: ['auth'],
  data() {
    return {
      user: { },
    }
  },
  mounted() {
    this.user = JSON.parse(this.auth);
  },
  methods: {
    editUser() { }
  },
  filters: {
    moment: function(date) {
      return moment(date).format("D [de] MMMM [de] YYYY ");
    }
  }
}
</script>

NOTE: You have to replace all use of auth with user within your template.

<template>
   <div class="row">
     <form  class="form-horizontal form-material">
       <div class="form-group">
         <label class="col-md-12">Nombre</label>
           <div class="col-md-12">
             <input type="text" class="form-control form-control-line"
               v-model="user.name">
             </div>
           </div>
           <div class="form-group">
             <label class="col-md-12">Apellido</label>
               <div class="col-md-12">
                 <input type="text" 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">
                  <option>Femenino</option>
                  <option>Masculino</option>
                  <option>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"
                 v-model="user.description">
                </textarea>
              </div>
            </div>
          <div class="col-sm-12">
            <button class="btn btn-success" 
              v-on:click="editUser()">Actualizar
            </button>
          </div>
      </form>
    </div>
</template>

Update information through an AJAX request

Taking into account that you are using Axios, you should follow a process similar to the following:

function editUser() {
  // Usar FormData es estrictament necesario cuando se trata de
  // enviar información como imágenes o contenido multimedia, en este
  // caso no es estrictamente necesario ya que no trabajas con contenido
  // multimedia, pero lo dejo para cualquier cambio futuro que puedas hacer.
  let data = new FormData();

  data.append('name', this.user.name);
  data.append('lastname', this.user.lastname);
  data.append('description', this.user.description);
  // ...

  axios.put('/la-url-para-editar', data)
       .then(response => {
          // Aquí pones cualquier operación una vez que el usuario
          // se actualizó exitosamente; un ejemplo, redireccionar a
          // otra página.
       })
       .catch(errors => {
          // Aquí las operaciones si ha ocurrido algún error.
       });
}

Keep in mind that axios works it is necessary that you specify the csrf token within the configurations of axios , if you use Laravel Mix, you will not have any problem since this already counts in the default configuration (inside the bootstrap.js file) the integration of said token.

    
answered by 13.04.2018 / 01:14
source