How to toggle vue components

Question

I have a main App.vue file, where I have placed elements like the navigation bar. The remainder of the content is rendered by vue-router. I'm trying to also place a series of modals on this file such that the modals can be accessed on any route, as soon as the corresponding link on the nav bar is clicked. I'm having trouble figuring out how to toggle the components to show and fade in (fade in -> I'm using bootstraps modals.The $ identifier for jQuery is causing issues and is not being recognised )

Any ideas?

APP.VUE

<template>    
    <nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
        <a href="#" class='col-md-2 text-center py-0'>
            <img src="./assets/4.png" id='site-logo'>
        </a>

        <div class="d-md-flex w-100">

            <div class="d-md-flex flex-1">
              ...
            </div>

            <div class="d-md-flex flex-1" style='justify-content: flex-end'>
                <p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
                    <a class='text-white'>Login</a>
                </p>

                <p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
                    <a href='/register' class='text-white'>Register</a>
                </p>
            </div>
        </div>
    </nav>


    <!-- MODALS -->
            <!-- LOGIN MODAL -->
            <LoginModal />
    <!--  -->
    <router-view/>
  </div>
</template>

<script>
import LoginModal from '@/components/modals/loginModal';

export default {
  name: 'App',
  components: {
      'LoginModal': LoginModal
  },

  data () {
      return {
          
      }
  },
  ...
}
</script>

LOGIN MODAL

<template>
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
                    <div class="container">
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder='Username...'>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" placeholder='Password...'>
                            </div>
                            <div class="form-group text-center my-4">
                                <input type="button" value="Submit" class='rounded'>
                            </div>
                        </form>

                        <p class="text-white text-center small">
                            Forgot Password?
                            <br>
                            <span style='color: #c4b2fe'>or</span>
                            <br>
                            Register a new account
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loginModal',
    data () {
        return {

        }
    },

    mounted () {
        
    }

    
}
</script>

<style scoped>
    .block {display: block}
    .modal-body {height: 50%}
    .modal-body p:nth-child(1) {margin: 40px 0;}
    .modal-content {background-color: #4855d8;}
    .modal-content input {
        background-color: #252b6e;
        border: none;
        font-weight: bold;
        color: #b6b4b7;
        font-size: 14px;
    }
    .modal-content input[type='button'] {
        color: white; 
        margin: auto;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        background-color: #080715;
        width: 120px;
    }
</style>

javimovi javimovi · Accepted Answer · 2018-11-15T10:15:29

You can use the transitions that VUE incorporates https://vuejs.org/v2/guide/transitions.html. Along with v-if to show or hide the modal.

APP.VUE - HTML

<transition name='modal-zoom'>
   <LoginModal v-if="activeModal" />
</transition>

APP.VUE - JS

methods: {
  activeModal: function () {
    // return boolean
  }
}

How to toggle vue components

1 Answers