即使出现前面的<v-if-else>,vue.js <v-else>也不会消失

我有一个页面,其中包含以下div序列:

<div v-if='someOtherCondition'>
    <some-component/>
</div>
<div v-else-if="showConfirmationPage">
    <confirmation-component/>
</div>
<div v-else>
     ... // normal page UI
</div>

showConfirmationPage is a computed property that looks in the vuex store:

computed: {
showConfirmationPage() {
            return this.$store.state.showConfirmationPage;
        }

I have two use cases where I set showConfirmationPage to true. One is when the page is reloaded after a redirect, the mounted() method checks for certain query string parameters, and if they are present dispatches an action on the store that sets showConfirmationPage to true. In this case only the confirmation-component is visible (someOtherCondition is not met in either case).

In the second case, I need to trigger the confirmation page from my ui (which is in the v-else part). In this case, I dispatch the same action on the store, and showConfirmationPage is set to true. The confirmation-component shows up, but the rest of the ui (from the v-else part) stays as well. The confirmation-component sort of pushes it to the right, but they are both visible.

这怎么可能? if-elseif-else结构的一部分如何获取值已更改的备注,而另一部分没有更改?

评论