Existe uma listagem onde retorno todos os usuários ativos no sistema e na mesma existe um botão para Editar Usuário, quando clico nessa opção, abro um modal, capturo o id do usuário e realizo uma consulta dos dados desse usuário em questão e, carrego os inputs com os campos.
Porém, não funciona como o esperado. Vou apresentar meu código:
new Vue({
el: '#user-table',
data: {
users: '',
firstName: '',
lastName: '',
cpf: '',
email: '',
description: '',
billing: '',
photo: ''
},
methods: {
resetPassword: function(userId, event) {
...
},
disableUser: function(userId, event) {
...
},
callModalEditUser: function(userId, event) {
var self = this;
self.$http.get('/dashboard/usuarios/usuario/' + userId).then(function(response) {
var user = response.data.user;
self.firstName = user.first_name;
self.lastName = user.last_name;
self.cpf = user.cpf;
self.email = user.email;
self.description = user.description;
self.billing = user.billing;
self.photo = user.photo;
$('#modal-edit-user').modal();
});
}
},
ready: function() {
var self = this;
self.$http.get('/dashboard/usuarios/listar-usuarios').then(function(response) {
self.users = response.data;
});
}
});
O problema em si está na função callModalEditUser
, essa é a função chamada para essa finalidade, abaixo mostro a chamada dela no HTML:
<a data-toggle="tooltip" v-on:click="callModalEditUser(user.id, $event)"
data-placement="top" title="Editar usuário"
class="btn btn-primary btn-sm edit-user">
<i class="fa fa-cog"></i>
</a>
Por fim, no modal, existem os inputs, vou apresentar as formas que já tentei:
<input type="text" class="form-control" v-bind:value="firstName" id="first_name" placeholder="Primeiro nome">
<input type="text" class="form-control" v-model="firstName" id="first_name" placeholder="Primeiro nome">
<input type="text" class="form-control" v-bind:value="@{{ firstName }}" id="first_name" placeholder="Primeiro nome">
<input type="text" class="form-control" v-model="@{{ firstName }}" id="first_name" placeholder="Primeiro nome">
<input type="text" class="form-control" value="@{{ firstName }}" id="first_name" placeholder="Primeiro nome">
O retorno do json ocorre naturalmente com os dados do usuário, dentro de user
obtenho todas as informações necessárias para exibir na tela.
Lembrando que, uso o @{{ }}
para dar escape e interpretar {{ }}
pois a minha aplicação backend é Laravel e uso o Blade Template.