我有一个页面,其中包含以下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结构的一部分如何获取值已更改的备注,而另一部分没有更改?