Passing an object or object key to a component in VueJs

Question

I have a Personnel table bound to an array of objects that is coming from VueJs. The last column on the table is a button for editing each record.

I'd like to show a modal popup when the edit button is clicked and bind the textboxes to the properties of the personnel that I want to edit. It should update the table and the source of the data when the save button on the modal popup is clicked.

But I am stuck on passing the object or even just the key to the component so I can load the data or bind the edited object into my textboxes.

JS

var app = new Vue({
  el: '#my-app',
  data: {
    personnels: [
      {
        id: 1,
        firstName: 'Billy',
        lastName: 'Bob',
        email: '[email protected]'
      },
      {
        id: 2,
        firstName: 'Mike',
        lastName: 'Coilers',
        email: '[email protected]'
      },
      {
        id: 3,
        firstName: 'Fred',
        lastName: 'Just',
        email: '[email protected]'
      },
      {
        id: 4,
        firstName: 'Tori',
        lastName: 'Drury',
        email: '[email protected]'
      }
    ]
  },
  methods: {
    showPersonnelEditor: function () {
      // how do i pass data to the personnelEditor component?
    }
  }
});

Vue.component('personnel-editor', {
  prop: ['personnel']
});

HTML

<div id="my-app">
    <table classs="table" width="100%">
        <tr>
            <th>
                Id
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
            <th>
                Actions
            </th>
        </tr>
        <tr v-for="personnel in personnels">
            <td>
                {{ personnel.id }}
            </td>
            <td>
                {{ personnel.firstName }}
            </td>
            <td>
                {{ personnel.lastName }}
            </td>
            <td>
                {{ personnel.email }}
            </td>
            <td>
                <button v-on:click="showPersonnelEditor">Edit</button>
            </td>
        </tr>
    </table>


    <personnel-editor inline-template><div class="modal fade" >
        <div class="modal-dialog">
            <div class="modal-header">
                header
            </div>
            <div class="modal-content">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Id</label>
                        <input type="text" v-model="personnel.Id" />
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12">
                            <label>First Name</label>
                            <input type="text" v-model="personnel.firstName" />
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Last Name</label>
                        <input type="text" v-model="personnel.lastName" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Email</label>
                        <input type="text" v-model="personnel.Email" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                oh mah foot
            </div>
        </div>
    </div>
</div></personnel-editor>

budgw · Accepted Answer · 2017-08-31 08:35:54Z

3

You can try :

<button v-on:click="showPersonnelEditor(personnel)">Edit</button>

Then in showPersonnelEditor method :

showPersonnelEditor: function (personnel) {
  this.selectedPersonnel = personnel; //make sure to declare selectedPersonnel in data
}

And finally in your html template :

<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >

Hote it helps.

Edit for binding the result of the modal :

You can emit an event when the modal is closed, either with a button or any other closed event depending on your implementation. This is a code sample for emitting en event :

        whenModalClosedMethod() {
            this.$emit('personnel-edited', personnel);
        }

Then in your template :

<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">

And then in your root component add a method :

updatePersonnel: function(personnel) {
   //look for the correct entry by id in your personnels array and update it
}

edited Aug 31, 2017 at 8:35

answered Aug 31, 2017 at 8:02

budgw

7101 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

secretAgentB Over a year ago

Thanks I was able to pull the personnel using this method but how do I bind it back to the textboxes?

budgw Over a year ago

There are several ways to do it, but my preferred one would be to emit an event for example when you close the modal (with a button or after any closed event) and react to this event on the root element. I edited the post to give code sample.

secretAgentB Over a year ago

Thanks but what I meant was that my textboxes were still empy when the modal opens up.

budgw Over a year ago

Strange. Maybe it's because you use prop instead of a data for 'personnel' in the personnel-editor. I'm not sure how v-model behave with props. Try with a data instead, for that you can add a data property and copy to it the content of the prop 'personel' when it changes (with watch for instance) or you can also directly use the model directive on your personnel-editor component (probably the cleanest solution). Take a look at the doc : vuejs.org/v2/guide/…

secretAgentB Over a year ago

I got it to show the values onto the modal. However, the values that i put into the modal does not get reflected onto the property. maybe because i am using prop instead of data?

Collectives™ on Stack Overflow

Passing an object or object key to a component in VueJs

1 Answer 1

Edit for binding the result of the modal :

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit for binding the result of the modal :

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related