Javascript 数据切换目标如何等待Vue中的axios成功/失败？

我想等待axios成功触发模式，或者在不更改任何现有样式的情况下不触发模式。当前代码总是在不等待axios响应的情况下触发，即使添加了v-if

当前代码：

<template>
<div>
    <div class="col-12 text-center">
        <a @click="func()" class="btn btn-sm btn-round btn-success save-button" data-toggle="modal" data-target="#success-save">submit</a>
    </div>


    <div v-if="modalDisplay" class="modal modal-top fade" id="success-save" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="text-center" style="color:white;"><strong>Success</strong></h3>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            modalDisplay: false,
        }
    },
    methods: {
        func() {
            axios.post('/some/uri', {
                'content': 'abc',
            })
                .then(response => {
                    this.modalDisplay = true;
                });
        },
    }
</script>

提交
&时代；
成功
导出默认值{
数据（）{
返回{
modalDisplay:错误，
}
},
方法：{
func（）{
post（“/some/uri”{
“内容”：“abc”，
})
。然后（响应=>{
this.modalDisplay=true；
});
},
}

我尝试过重新定位v-if和其他，但仍然不起作用，或者已经起作用，但风格已经改变，您的解决方案将非常有用，谢谢

编辑： 我正在使用Vue 2.6.11

---

修改了Vue 2.x中的代码，模板中只应包含一个元素。 试着像这样把所有的标签放到一个div中

提交
&时代；
成功

您能告诉我您使用的是vue 2还是vue 3吗？因此，如果您将console.log添加到

。然后（响应=>{

处理程序，它会立即输出到控制台？@devil-0-per vue 2.6。11@Anatoly是，如果成功可能是您的请求太快？）你的API失败了吗？你有日志吗？你可以在

axios

请求中添加一个缓存块，也可以在这里找到它。我认为问题不在于此。在等待axios成功之前先执行按钮（这只会更改modalDisplay值）。因此，问题是，如何等待Axios成功，然后在不更改现有样式的情况下切换modalDisplay。请检查此处的提示。该按钮显示在单击按钮后