I'm working with BootstrapVue (VueJS 2).

When I open my PWA i want to see my header (should be there always) and my login.vue - the components component1 and component2 should be hidden.

And after clicking on my LOGIN Button in my login.vue I want to hide my login.vue and show my other two components.

But I don't know how to solve this problem.. Thank You in advance!

<template>
  <header/>
  <login/>
  <component1/>
  <component2/> 
</template>


<script>

import header from './components/header.vue'
import component1 from './components/component1.vue'
import component2 from './components/component2.vue' 
import login from './components/login.vue'


export default {
  name: 'App',
  components: {
    header,
    component1,
    component2,
    login,
  }
}

</script>

<template>
  <div class="mt-5 col-md-12">
    <div class="mt-2">User ID</div>
    <b-form-input></b-form-input>
  </div>

  <b-button class="mt-5 mb-5 btn-block"> Login </b-button>
</template>

CodePudding user response：

First of all you need to add click event to the login button to understand if user is clicked. With the event we can emit value to the parent element

<b-button class="mt-5 mb-5 btn-block" @click="$emit('loginButtonClicked')"> Login </b-button>

After that you need to modify parent component like below;

<template>
  <header/>
  <login v-if="!hideLogin" @loginButtonClicked="hideLogin=true"/>
  <component1/>
  <component2/> 
</template>


<script>

import header from './components/header.vue'
import component1 from './components/component1.vue'
import component2 from './components/component2.vue' 
import login from './components/login.vue'


export default {
  name: 'App',
  components: {
    header,
    component1,
    component2,
    login,
  },

  data () {
    return {
      hideLogin: false
    }
  }
}

</script>

Here we listened event in the parent and modified the data in it to show components via v-if

CodePudding user response：

If you are using vuex, create an attribute in the state and change its value in the method called by the button. Else you can use a trigger and emit and event when you click the button, and listen for it in your parent component, and change the value of an data attribute. Depends of this data value (or your state attribute if you have vuex), you can use v-if in your component to choose the components you want to show.