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

Question

我想等待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>

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

编辑：我使用的是Vue 2.6.11修改了代码

Answer 1

在Vue 2.x中，模板中应该只包含一个元素。尝试将所有标签推入一个类似的div中

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

还添加一个缓存块到您的axios调用

axios.post('/some/uri', {
'content': 'abc',
})
.then(response => {
this.modalDisplay = true;
})
.catch(error=> {
console.log(error);
});

在Vue 3中，您可以使用片段来实现这一点，而无需包装到单个节点中

你可以在这里找到实现