How to pass selected id to modal in Vue.js?

Question

I'm trying to delete user with popup alert. I have list of users. When i click on delete button i want to pass id to modal through method and then that id to delete method which is calling on button in modal. I'm getting error Property or method "id" is not defined on the instance but referenced during render. How i can get the id of 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">&times;</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>

Answer 1

Your passing id, so you just need to define it on a model somewhere so deleteUser can pick it up

export default {
   data() {
       return {
           editing_user_id: 0,
           //..
       }
   },
   methods:{
       showModal(id) {
            this.editing_user_id = id;
            $('#userDeleteModal').modal('show');
        },
        deleteUser() { 
          axios.post('api/deleteUser', null, {
            params: {
                'user_id': this.editing_user_id,

        //..
   }

---

IMO just pass the whole item/user i.e showModal(user), then change editing_user_id to just editing_user your almost always want more than just the id.

and aim for axios.delete('api/user/' + editing_user.id, ... it makes more sense.