如何使用 Vue.js 在第一次单击而不是第二次单击时打开 Bootstrap 4 模式

Question

我目前有以下组件，我想做的是我想将 api 中的数据加载到我的模态中。数据按预期加载，但模式仅在第二次单击时打开。第一次单击没有打开模式。但是，当模式打开然后我关闭它时。一切再次打开。但是当我刷新它并没有打开。

<template>
    <div>
        <tbody v-for="(value, key) in users" :key="key.id">
            <tr>
                <td>{{ value.type }}</td>
            </tr>
            <tr v-for="user in value.user" :key="user.id">
                <td class='text-center'>
                    <button class="btn btn-default" @click="edit(user.id)" data-toggle="modal" data-target="#modalEdit">
                        <i class="far fa-edit"></i> Edit
                    </button>
                </td>
            </tr>
        </tbody>

        <edit-modal
            v-if="showEdit"
            :info="info"/>
    </div>
</template>

<script>
    import EditModal from './EditModal.vue';

    export default {
        components: {
            EditModal
        },
        data() {
            return {
                showEdit: false,
                users: [],
                info: {
                    name: '',
                    status: '',
                }
            }
        },
        methods: {
            edit(userId) {

                axios.get(`user/${userId}`)
                    .then(response => {
                        this.info = response.data
                        this.showEdit = true
                    }).catch(error => {
                        console.log(error)
                    })

            }
        }
    }
</script>

<template>
    <div>
        <div class="modal fade" id="modalEdit">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">

                    <div class="modal-header bg-primary">
                        <h6 class="modal-title text-white font-weight-bold">Edit</h6>
                        <div class="cursor-pointer" data-dismiss="modal" title="Close">
                            <i class="fas fa-times text-white"></i>
                        </div>
                    </div>

                    <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-sm-4">User</label>
                            <div class="col-md-8">{{ info.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
        props: {
            info: {
                type: Object,
                default: () => ({
                    name: '',
                    status: '',
                })
            }
        }
    }

</script>

奇怪的是，如果我在edit方法中去掉axios请求

methods: {
            edit(userId) {
               this.showEdit = true
            }
        }

模式从第一次点击开始。但是我需要 axios 请求来填充模态中的数据。

Answer 1

你不需要在这里写return true

methods: {
            edit(userId) {

                axios.get(`user/${userId}`)
                    .then(response => {
                        this.info = response.data
                        this.showEdit = true
                    }).catch(error => {
                        console.log(error)
                    })

            }
        }

这应该可以。

Answer 2

第一次单击可能不起作用，因为如果您使用 v-if 组件在 dom 中不存在，直到条件为真。在这种情况下，直到 this.showEdit 为 true，按钮 data-target 和 data-toggle 才会存在。

第一次单击按钮 this.showEdit 为 false 直到您收到响应，第二次单击按钮 this.showEdit 为 true 因为您之前已经收到了响应但数据可能已过时，直到您收到第二个响应。

我将使用的解决方案是在单击时将 showEdit 设置为 true，然后将 userId 作为道具传递给您的模态，并在模态组件的就绪/已安装挂钩上获取数据，然后填写您的信息。

顺便说一句，我认为你的按钮数据目标和你的模式 id 应该匹配。

Answer 3

你试过用“v-show”代替

<edit-modal
        v-show="showEdit"
        :info="info"/>