50
rated 0 times
[
52]
[
2]
/ answers: 1 / hits: 5830
/ 5 Years ago, wed, may 15, 2019, 12:00:00
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 ?
More From » html
