4

Tengo que hacer la vista de actualizar perfil de usuario en Vuejs, la vista actualmente está hecha en blade y funciona bien, pero tengo que pasar todo a Vuejs.

Desde el sidebar.blade.php le paso el user al componente Vue llamado Profile.vue

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

Los datos los recojo en el template del componente Profile.vue y se muestran en las cajas de texto del formulario con 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 ");
    }
}

}

Estas son las rutas del arvhico we.php

Route::get('/panel/profile', 'UserController@userEdit');
Route::put('/panel/profile', 'UserController@userUpdate');

¿Como lo puedo hacer teniendo la vista Vuejs?

Necesito crear el método editUser()

Me confunde el tema ya que llevo poco con Vue, estoy usando Laravel 5.6, Vuejs 2 y Axios.

Desde ya muchas gracias

5
  • ¿qué es lo que no funciona?
    – Shaz
    Commented el 12 abr. 2018 a las 19:23
  • No es que no funcione, necesito hacer eso y no sé como hasta el momento, si me puedes guiar sería estupendo.
    – Felipe
    Commented el 12 abr. 2018 a las 19:29
  • Necesito hacer el metodo editUser()
    – Felipe
    Commented el 12 abr. 2018 a las 19:40
  • ¿qué va a realizar dicho método?
    – Shaz
    Commented el 12 abr. 2018 a las 20:38
  • Tomar los datos del formulario y actualizarlos en la db
    – Felipe
    Commented el 12 abr. 2018 a las 22:36

1 respuesta 1

3

Simple, en vez de usar :auth="{{ Auth::user() }}", asegúrate de quitar los puntos :, ya de esta forma estarás especificando a html que auth es sólo una propiedad más del elemento dentro del DOM; será necesario también transformar el usuario a tipo JSON al momento de pasarlo a la propiedad:

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

Problema dentro del componente de Vue

Te darás cuenta que aún haciendo esto no funcionará tu componente y eso se debe a que Vue interpretará el valor de la propiedad auth como un string, existen muchas formas de poder resolver esto, me iré por la más sencilla. Para poder resolver el problema de la propiedad, será necesario transformar los datos en algún punto del ciclo de vida del componente y agregarlo a un nuevo dato, un ejemplo podría ser:

<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>

NOTA: Tienes que sustituir todo el uso de auth por user dentro de tu 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>

Actualizar la información mediante una petición AJAX

Teniendo en cuenta que estás usando Axios, tendrías que seguir un proceso similar al siguiente:

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.
       });
}

Ten en cuenta para que axios funcione es necesario que especifiques el csrf token dentro de las configuraciones de axios, si usas Laravel Mix, no tendrás ningún problema ya que este ya cuenta en la configuración default (dentro del archivo bootstrap.js) la integración de dicho token.

4
  • 1
    Perfecto, y ¿como sería la lógica dentro del método?, ¿como enviaría esos datos por axios?
    – Felipe
    Commented el 12 abr. 2018 a las 23:27
  • ¿Una petición post para enviar información a actualizar? Commented el 13 abr. 2018 a las 2:50
  • mas que nada put para enviar los datos del formulario al controlador.
    – Felipe
    Commented el 13 abr. 2018 a las 3:32
  • 1
    Claro, hago lo que me indicas y me arroja un error 500, mi ruta es esta Route::put('/dashboard/profile/', 'UserController@myProfile'); y en el metodo solo tengo: public function myProfile(Request $request) { dd($request); }
    – Felipe
    Commented el 13 abr. 2018 a las 19:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.