Показать Vue компонент на месте другого

Question

Только начиная изучать Vue на примере одностраничного сайта столкнулся с такой задачей: на странице показываю компонент Home с информацией и кнопкой "Зарегистрироваться". Нужно сделать так, чтобы при нажатии на кнопку "Зарегистрироваться" появлялся компонент с формой регистрации на месте компонента с информацией.

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';

Vue.use(VueAxios, axios);


const app = new Vue({
    el: '#app',
    render: h => h(App),
});

App.vue:

template>
    <div>
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <span class="navbar-brand">
                    M2M
                </span>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="11">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <span class="navbar-text">
                        fdsfsdfsdf <br>
                        gdsjhfgsdjhfg
                    </span>
                </div>
            </div>
        </nav>
        <main class="py-4">
            <Home />
        </main>
    </div>
</template>
<script>
    import Home from './components/home'
    export default {
        components: {
            Home
        }
    }
</script>

Home.vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col">
                <h1 class="text-center">РЕГИСТРАЦИЯ И ОПЛАТА<br>M2M EXPRESS</h1>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col">
                <h1 class="text-center">РЕГИСТРАЦИЯ И ОПЛАТА<br>M2M EXPRESS</h1>
            </div>
            <div class="col">
                <ul>
                    <li>M2M без потери сигнала</li>
                    <li>M2M без потери сигнала</li>
                    <li>M2M без потери сигнала</li>
                    <li>M2M без потери сигнала</li>
                </ul>
                <a href="#" class="btn btn-success btn-lg" @click="register" >РЕГИСТРАЦИЯ</a>
                <a href="#" class="btn btn-primary btn-lg" @click="login" >ВХОД</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

    }
</script>

Как реализовать методы register и login в компоненте Home?

Answer 1

По-деревенски. Для понимания.

Home.vue

<template>
  .....
  <div v-if="compName !== ''">
    <component :is="compName"></component>
  </div>
  <a href="#" class="btn btn-success btn-lg" @click="register()" >РЕГИСТРАЦИЯ</a>
  <a href="#" class="btn btn-primary btn-lg" @click="login()" >ВХОД</a>
  .....
</template>

<script>
    import Register from './components/register.vue';
    import Login from './components/login.vue';

    export default {
       components: {
          Register,
          Login,
       },
       data() {
         return {
           compName: '',
         };
       },
       methods: {
         register: function () {
           this.compName = 'Register';
         },
         login: function () {
           this.compName = 'Login';
         },
       },
    }
</script>

БЛОГ НА HUSL

Показать Vue компонент на месте другого

Ответы (1 шт):