Vuejs Accessing Data in Modal Component Using Props

Question

There are very similar questions to the one am asking but the solutions proposed don't my situation. I am trying to access data from a parent list in a different component using a Modal component in vue. I have tried passing the prop value in the loop as well as the used component in the parent view but receive no data.

This is the parent template.

    <template>
    <table class="table table-bordered table-stripped" v-if="users.length>0">
        <caption>List of Contacts</caption>
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(user, index) in users" :key="user.id">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>
                    <button type="button" class="btn btn-success btn-sm" @click="initEdit(user)" :euser="user">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
    <edit-user v-if="showEditUser" :showEditUser.sync="showEdit"></edit-user>
</template>

<script>
import editUser from '@/components/editUser.vue';
export default {
  name: 'listusers',
  components: {
        'edit-user': editUser,
    },
    data() {
      return {
          user: [],
          users: [],
          euser: {},
          showEdit: false,
        };
  },
    methods: {
        initEdit() {
            this.showEditUser = true;
        },
    },
};
</script>

And this is the modal component.

    <template>
        <transition name="modal" role="dialog">
            <div class="modal" style="display: block">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Contact</h5>
                    </div>
                    <div class="modal-body">
                        <p>{{euser}}</p>
                        <p>{{euser.id}}</p>
                    </div>
                    <div class="modal-footer">
                            <button type="button" class="btn btn-default" @click="closeModal">Close</button>
                    </div>
                    </div>
                </div>
            </div>
        </transition>
    </template>
<script>

export default {
    name: 'editUser',
    props: {
      euser: {
        type: Object,
      },
      showEdit: {
          'default' : false,
      }
    },
    data() {
        return {
            edit_user: [],
        };
    },
  methods: {
        closeModal(){
            this.$emit('update:showEdit');
        },
  },
};
</script>

I have tried passing the prop value in the loop as shown above as well as in the component shown below.

<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="user"></edit-user>

How can I get a single user from the parent to display in the modal ?

Luigi · Accepted Answer · 2019-05-15 16:55:43Z

2

In your parent component you can create a data property called "currUser:null" and on "initUser" method you can do the following:

initEdit(user){
    this.currUser=user;
    this.showEditUser = true;
}

then your modal component definition will look like the following:

<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="currUser"> 
</edit-user>

answered May 15, 2019 at 16:55

Luigi

3142 silver badges12 bronze badges

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

1 Comment

Adwin Over a year ago

Thank you. That is exactly what I was looking for. It works.

Shawn Pacarar · Accepted Answer · 2019-05-15 18:23:38Z

0

First, you must pass the euser prop to the <edit-user/> component not the button that will call the edit.

Second, the initEdit() function should look more like this

initEdit(user) {
  this.user = user
  this.showEditUser = true
}

Third, if you plan on editing the user within the modal you will likely need to create a copy of the user within the child component.

watch: {
  showEditUser() {
    this.editableUser = JSON.parse(JSON.stringify(this.euser))
  }
}

then all of the v-models on the child should point to this.editableUser. when the user goes to save the edit you can emit a new function that could pass the new version back out to the parent like so

saveEdit() {
   this.$emit('save', this.editableUser)
}

you would just need to catch the save in the <edit-user /> component like so

<edit-user v-show="showEditUser" :showEditUSer.sync="showEdit" :euser="user" @save="saveUser" />

//script...data...methods
saveUser(user) {
  let ind = this.users.map(u => u.id).indexOf(user.id)
  if(ind != -1) {
    Object.assign(this.users[ind], user) //put user back where it belongs with new data
  }
}

answered May 15, 2019 at 18:23

Shawn Pacarar

4233 silver badges13 bronze badges

1 Comment

Adwin Over a year ago

Combining this with @luigi makes me able to pass data between the two components. Thank you.

Jalil · Accepted Answer · 2019-05-16 06:54:54Z

0

Just passing the user like this:

<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="user[indexOfUser]"></edit-user>

And change the prop properties to receive an object an not an Array

  euser: {
    type: Object,
  },

Just try to add in your main component data to user just for testing if the 'undefined' problem comes from there. and in the :euser="user[0]"

user: [{
   id: 1
}]

edited May 16, 2019 at 6:54

answered May 15, 2019 at 13:19

Jalil

1,2761 gold badge15 silver badges36 bronze badges

3 Comments

Adwin Over a year ago

Thanks for your reply. I have changed the prop properties. I have also tried passing the user as you suggested. The user is still not showing. The object is 'undefined'.

Jalil Over a year ago

I just added some more code to test the object 'undefined'

Adwin Over a year ago

I made the modifications but on my child component the user is not showing.

Collectives™ on Stack Overflow

Vuejs Accessing Data in Modal Component Using Props

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related