Динамическое отображение компонента во vue?

Question

[Syndr0me]

<template>
<div>
  <component :is="login"></component>

  <header class="header" >
    <div class="header__logo">
      <a href="index.html"><img height="34" width="130" src="../assets/img/icon2.svg" alt=""></a>
    </div>
    <div class="header__nav">
      <nav class="header__nav__nav">
        <a href="#">О проекте</a>
        <a href="#">FAQs</a>
        <a href="#">
          <button class="btn btn--sm" @click="component='login'">Начать</button>
        </a>
      </nav>
    </div>
  </header>
</div>
</template>

<script>
  import login from './login.vue'

  export default {
    components: {
      login
    },
      data() {
          return {
            component:'login'
          }
      },
    methods: {
        login: function () {
           //????
        }
    }
  }

</script>

Есть такой код, пытаюсь динамически отрендерить компонент во vue cli, при нажатии на кнопку "Начать" (надо, чтобы рисовался компонент login в виде popup окна). Получаю ошибку:

[Vue warn]: Property or method "login" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declari...

found in

---> at src/views/Home.vue
at src/App.vue


Как поправить, подскажите плз

Answer 1

[Дмитрий Беляев]

<component :is="component"></component>

Comments

[Syndr0me]

Так он по дефолту отображается, а как его сделать теперь активируемым на кнопку?

[Дмитрий Беляев]

Syndr0me, тогда Вам не динамический компонент нужен, а v-if
https://ru.vuejs.org/v2/guide/conditional.html

[Syndr0me]

Дмитрий Беляев, Спасибо Дмитрий! Также, как я понял можно использовать v-show, но это свойство просто манипулирует display элемента, то есть темплейт будет сразу отрисован на странице.

Answer 2

[Syndr0me]

p.s. кажется я нашел решение https://github.com/javisperez/vuedals