Vuejs: How to display a value in the dynamic modal input with v-model or v-bind:value

Question

There is a list where return all active users on the system and in the same there is a button to Edit User, when I click on this option, I open a modal, capture the user id and perform a query of the data of that user in question and, load the inputs with the fields.

However, it does not work as expected. I will present my code:

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

The problem itself is in function callModalEditUser, this is the function called for this purpose, below I show her call in 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>

Finally, in modal, there are inputs, I will present the forms I have tried:

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

The return of json occurs naturally with the user data, within user get all the information needed to display on the screen.

Remembering that, I use the @{{ }} to escape and interpret {{ }} because my backend application is Laravel and I use Blade Template.

Answer 1

Even in an Laravel application you can use the v-model this way: v-model="field". Check if the modal is within the scope of your instance Vue: el: '#user-table'. That is, the modal must be defined within the html tags:

<div id="user-table">

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

</div>

Answer 2

Make sure that self.firstName = user.first_name is actually being assigned via a console.log or utliza Vue dev tools.

Vue devtools

About the syntax utlize v-model for input bind:

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