I am having an issue when trying to delete a user using a popup alert. I have a list of users, and when I click on the delete button, I want to pass the user's ID to a modal through a method, and then use that ID in the delete method called by a button in the modal. However, I keep getting an error saying Property or method "id" is not defined on the instance but referenced during render. How can I successfully retrieve the ID of the clicked user?
Table
<tr v-for="users in pending_users.data" :key="users.id">
<td>{{users.name}}</td>
<td>{{users.email}}</td>
<td>{{users.mobile_no}}</td>
<td><button class="btn btn-danger btn-sm" @click="showModal(users.id)">Delete</button></td>
</tr>
</tbody>
Modal
<div class="modal fade" id="userDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete or Decline user</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you want to delete this user?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-success" @click="deleteUser(id)">Yes</button>
</div>
</div>
</div>
</div>
Methods
<script>
export default {
data() {
return {
}
},
methods: {
showModal(id) {
$('#userDeleteModal').modal('show');
},
deleteUser(id) {
axios.post('api/deleteUser', null,
{
params: {
'user_id': id,
}
})
.then(({data}) => {
});
},
},
</script>