1

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.

2 Respostas 2

2

Mesmo em uma aplicação Laravel você pode utilizar o v-model desta forma: v-model="campo". Verifique se o modal está dentro do escopo da sua instância Vue: el: '#user-table'. Ou seja, o modal deve estar definido dentro das tag's html:

<div id="user-table">

 <div class="modal">
  ....
 </div>

</div>
1
  • Era exatamente esse o problema, troquei o el: '#user-table' pelo el: 'body' e tudo funcionou perfeitamente. Obrigado. Commented 10/09/2016 às 17:59
2

Verifique se realmente o self.firstName = user.first_name está sendo atribuido atraves de um console.log ou utliza vue dev tools.

Vue devtools

Sobre a sintaxe utlize v-model para bind de inputs:

Form Input Bindings

Basics Usage

You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. http://vuejs.org/guide/forms.html

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .