Vue js: Change value using if else

Question

I am new to Vue and I have two button. One is to show the login section and one is to show the register section. What I am tryin to achieve is, if I click on the login button, I want the login section to show and if I click on the register button, I want to hide login section and the register section to show. And by default, I want the login section to be showing. And also, if I click on the login button or Join button and that section was already showing, I want to keep that section showing. Is there a way to achieve this using if else statement or is there a better way to do this. Below is my code

var app = new Vue({
  el: '#app',
  data: {
    displayLoginPage: true,
    displayJoinPage: false
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid p-0" id="app">
    <div class="col-md-12">
      <div class="col-md-12 sub-title">
        <div class="col horizontal-line">
          <h5>PERSONAL DETAILS</h5>
        </div>
        <div class="col-md-12 text-color-per">
          <p>Make Sure All Enter Information Are Correct</p>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-center entry-section col-sm-12">
      <div class="col-md-6 entry-option-button-login" id="show-login-section">
        <button @click="displayLoginPage = !displayLoginPage"  type="button" name="btn button">
          Login</button>
      </div>
      <div class="col-md-6 entry-option-button-join" id="show-join-section">
        <button @click="displayJoinPage = !displayJoinPage" type="button" name="btn button">
          Join</button>
      </div>
    </div>
    <div v-show="displayLoginPage">
    <h5>Hello Login Page</h5>
    </div>
    <div v-show="displayJoinPage">
    <h5>Hello Register Page</div>
    </div>
  </div>

tony19 · Accepted Answer · 2022-07-16 00:00:25Z

You could use a single boolean, since there are only two views. Set the variable to true to show the login view and hide the other, and vice versa for false. Additionally, replace v-show with v-if and v-else:

<template>
  <div>
    <button @click="displayLoginPage = true">Login</button>
    <button @click="displayLoginPage = false">Join</button>

    <div v-if="displayLoginPage">
      <h5>Hello Login Page</h5>
    </div>
    <div v-else>
      <h5>Hello Register Page</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayLoginPage: true
    }
  }
}
</script>

var app = new Vue({
  el: '#app',
  data: {
    displayLoginPage: true
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div class="container-fluid p-0" id="app">
  <div class="col-md-12">
    <div class="col-md-12 sub-title">
      <div class="col horizontal-line">
        <h5>PERSONAL DETAILS</h5>
      </div>
      <div class="col-md-12 text-color-per">
        <p>Make Sure All Enter Information Are Correct</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center entry-section col-sm-12">
    <div class="col-md-6 entry-option-button-login" id="show-login-section">
      <button @click="displayLoginPage = true" type="button" name="btn button">
          Login</button>
    </div>
    <div class="col-md-6 entry-option-button-join" id="show-join-section">
      <button @click="displayLoginPage = false" type="button" name="btn button">
          Join</button>
    </div>
  </div>

  <div v-if="displayLoginPage">
    <h5>Hello Login Page</h5>
  </div>
  <div v-else>
    <h5>Hello Register Page</div>
  </div>
</div>

If you plan to have more than two views, you could set the variable to a string specific to each view. For example, set displayPage to "login" to show the login-view; or "join" to show the join-view. Change your v-show condition to compare displayPage against the corresponding value:

<template>
  <div>
    <button @click="displayPage = 'login'">Login</button>
    <button @click="displayPage = 'join'">Join</button>

    <div v-show="displayPage == 'login'">
      <h5>Hello Login Page</h5>
    </div>
    <div v-show="displayPage == 'join'">
      <h5>Hello Register Page</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayPage: 'login'
    }
  }
}
</script>

var app = new Vue({
  el: '#app',
  data: {
    displayPage: 'login'
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div class="container-fluid p-0" id="app">
  <div class="col-md-12">
    <div class="col-md-12 sub-title">
      <div class="col horizontal-line">
        <h5>PERSONAL DETAILS</h5>
      </div>
      <div class="col-md-12 text-color-per">
        <p>Make Sure All Enter Information Are Correct</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center entry-section col-sm-12">
    <div class="col-md-6 entry-option-button-login" id="show-login-section">
      <button @click="displayPage = 'login'" type="button" name="btn button">
          Login</button>
    </div>
    <div class="col-md-6 entry-option-button-join" id="show-join-section">
      <button @click="displayPage = 'join'" type="button" name="btn button">
          Join</button>
    </div>
  </div>
  <div v-show="displayPage == 'login'">
    <h5>Hello Login Page</h5>
  </div>
  <div v-show="displayPage == 'join'">
    <h5>Hello Register Page</div>
  </div>
</div>

Brian Lee · Accepted Answer · 2020-04-13 01:48:11Z

You just need to explicitly set the values for displayLoginPage and displayJoinPage when either button is clicked. See the following example:

var app = new Vue({
  el: '#app',
  data: {
    displayLoginPage: true,
    displayJoinPage: false
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid p-0" id="app">
    <div class="col-md-12">
      <div class="col-md-12 sub-title">
        <div class="col horizontal-line">
          <h5>PERSONAL DETAILS</h5>
        </div>
        <div class="col-md-12 text-color-per">
          <p>Make Sure All Enter Information Are Correct</p>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-center entry-section col-sm-12">
      <div class="col-md-6 entry-option-button-login" id="show-login-section">
        <button @click="(displayLoginPage = true) && (displayJoinPage = false)"  type="button" name="btn button">
          Login</button>
      </div>
      <div class="col-md-6 entry-option-button-join" id="show-join-section">
        <button @click="(displayJoinPage = true) && (displayLoginPage = false)" type="button" name="btn button">
          Join</button>
      </div>
    </div>
    <div v-show="displayLoginPage">
    <h5>Hello Login Page</h5>
    </div>
    <div v-show="displayJoinPage">
    <h5>Hello Register Page</div>
    </div>
  </div>

Collectives™ on Stack Overflow

Vue js: Change value using if else

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related