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? Me confunde el tema ya que llevo poco con Vue, estoy usando Laravel 5.6, Vuejs 2 y Axios.
Desde ya muchas gracias