如何在 Vue.js 中将选定的 id 传递给模态？

Question

我正在尝试通过弹出警报删除用户。我有用户列表。当我单击删除按钮时，我想通过方法将 id 传递给模态，然后将该 id 传递给在模态中调用按钮的删除方法。我收到错误属性或方法“id”未在实例上定义，但在渲染期间引用。如何获取点击用户的 id？

桌子

<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>

莫代尔

       <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>

方法

<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

你传递的 id，所以你只需要在模型的某个地方定义它，这样 deleteUser 就可以拾取它

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只需传递整个项目/用户即showModal(user)，然后更改editing_user_id为editing_user您几乎总是想要的不仅仅是ID。

并以此为axios.delete('api/user/' + editing_user.id, ...目标更有意义。