How can I toggle display with vuejs

Question

I want buttons visibility to be toggled with display:none when i click .button1 I tried if statements but not working n' also how can i bind two or more buttons one style with vue

<template>
  <div>
    <div id="buttons">
      <div class="button1" @click="showOthers()">1</div>
      <div class="button2" v-bind:style="{ display }">2</div>
      <div class="button3" v-bind:style="{ display }">3</div>
    </div>
  </div>
</template>

  data(){
      return {
        display:'none'
      }
  },
  methods: {
    showOthers: function() {
      this.display = "inline-block"
      if(this.display == "inline-block"){
        this.display = 'none';
      }
    }
  }

*{
  font-family: sans-serif;
}
#buttons div{
  margin-top:5px;
  text-align: center;
  width:40px;
  height:35px;
  background: #333;
  border-radius:15px;
  color:white;
}
#buttons div:first-child{
  display: inline-block;
}

Shouldn't that be an if/else in showOthers? Otherwise you're testing whether this.display is inline-block just after setting it to inline-block. Any reason why you're not using v-if or v-show for this? — skirtle
– skirtle, Commented Dec 16, 2019 at 19:59
you're setting this.display to "inline-block" then checking if(this.display == "inline-block"), this if condition will always be true — Chris Li
– Chris Li, Commented Dec 16, 2019 at 20:01
you just want to toggle the other button's display when click on button 1 right ? — Muhammad Usman
– Muhammad Usman, Commented Dec 16, 2019 at 20:05

Muhammad Usman · Accepted Answer · 2019-12-16 20:08:00Z

If I understood it correctly, you just want to toggle the display of other button when clicking on button 1. I would simply use v-if and toggle the value of the bonded variable inside v-if when clicking button 1

Something like

var app = new Vue({
  el: '#app',
   data :{
        display:false
  },
  methods: {
    showOthers: function() {
      this.display = !this.display;
    }
  }
})

*{
  font-family: sans-serif;
}
#buttons div{
  margin-top:5px;
  text-align: center;
  width:40px;
  height:35px;
  background: #333;
  border-radius:15px;
  color:white;
}
#buttons div:first-child{
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div id="buttons">
      <div class="button1" @click="showOthers()">1</div>
      <div class="button2" v-if="display">2</div>
      <div class="button3" v-if="display">3</div>
    </div>
</div>

Samidjo · Accepted Answer · 2019-12-16 22:00:55Z

1- To toggle visibility you only have to change the value of display, then button2 and button3 will be updated.

<div id="buttons">
   <div class="button1" @click="showOthers()">1</div>
   <div class="button2" v-show="display == 'inline-block' ? false: true">2</div>
   <div class="button3" v-show="display == 'inline-block' ? false : true">3</div>
</div>

...

   showOthers: function() { this.display = "inline-block" };

2- Binding style in Vuejs is like standard html/css

In your style section :

.button { /*Write whatever*/}

In your html:

<div id="buttons">
   <div class="button" @click="showOthers()">1</div>
   <div class="button" v-show="display == 'inline-block' ? false: true">2</div>
   <div class="button" v-show="display == 'inline-block' ? false : true">3</div>
</div>

Collectives™ on Stack Overflow

How can I toggle display with vuejs

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