[Vuejs]-Modifying 4 variable in one click in vue

by

0👍

Load the Components First

<div>
    <div>
       <button @click="showFoo">add a new find</button>
       <button @click="showBar">my table</button>
       <button @click="showBaz">my wall of fame</button>
       <button @click="showPan">my blog</button>
    </div>
    <div v-if="showFoo"> < FooComponent /> </div>
    <div v-else-if="showBar"> < BarComponent /> </div>
    <div v-else-if="showBaz"> < BazComponent /> </div>
    <div v-else-if="showPan"> < PanComponent /> </div>
</div>

Create a data and set first one to true

data {
  return {
    showFoo: true,
    showBar: false,
    showBaz: false,
    showPan: false,
  }
}

In the Methods

hideFoo() {
   this.showFoo = false
   this.showBar = true
}

hideBar() {
   this.showBar = false
   this.showBaz = true
}

hideBaz() {
   this.showBaz = false
   this.showPan = true
}

hidePan() {
   this.showPan = false
   this.showFoo = true
}

Leave a comment