Bootstrap-Vue-使子组件在b模式组件内工作

Question

So for some reason when I add a subcomponent to the <b-modal> component it doesn't display the modal properly. It looks like the :is="currentModal" isn't being read properly.

  <b-modal size="lg" v-model="currentModal" @ok="currentModal = null">
    <component :is="currentModal" :email="email"></component>
  </b-modal>

Basically currentModal is the current component to display. if I change it so that currentModal is a string, like such, it still doesn't work properly either:

  <b-modal size="lg" v-model="currentModal" @ok="currentModal = null">
    <Register v-if="currentModal=='register'":email="email"></Register>
    <Login v-if="currentModal=='login'" :email="email"><Login>
  </b-modal>

If I remove the b-modal tags altogether the Login and Register components work like they're supposed to, so the problem seems to be that the Register and Login components aren't reading currentModal properly from within b-modal, for some reason. Any help would be appreciated!

Answer 1

You need to use <b-container> as a direct child element of <b-modal> .

In this case, it'll be something like below:

<b-modal size="lg" v-model="currentModal" @ok="currentModal = null">
    <b-container>
        <component :is="currentModal" :email="email"></component>
    </b-container>
</b-modal>