CODEWITHSUNDEEP
javascriptvue.jsbutton
lannenere
lannenere

Reputation: 69

How to hide a button in Vue after it got clicked?

Code:

<v-btn large color="green"  @click="function">
   <v-icon>star</v-icon> Add
</v-btn>

Is there a solution in Vue or is it also possible via JavaScript?

Upvotes: 2

Views: 23470

Answers (3)

David Vetan
David Vetan

Reputation: 1

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
<div id="app">
  <button v-if="btn" @click="toggle">Press to Hide This Button</button>
</div>

Script

var app = new Vue({
  el: '#app',
  data: {
    btn: true
  },
  methods: {
    toggle() {
      this.btn = false;
    }
  }
})

something like this should work. if btn is true, the button will be displayed. if the button is pressed, the toggle function is triggered, btn is changed to false. the button is only shown if btn is true.

Upvotes: 0

MaleihMaxime
MaleihMaxime

Reputation: 63

what you can do is to use css to add a class to the element. Front there you can now hide the element using css rules.

an example can be passing the state of the element (that is to hide or to show as an attribute to your component when clicked)

eg 

<v-btn large color="green"  @click="function">
    <v-icon>star</v-icon> Add
</v-btn>

to 

<v-btn large color="green"  @click="function" v-bind"hide = true">
     <v-icon>star</v-icon> Add
</v-btn>

then you can now use the variable in your vue component to know if you need to show or hide. That's all

Upvotes: -1

user3596335
user3596335

Reputation:

You can hide a button using the vue onClick-event v-on:click.

v-on:click="isHidden = true"

The attribute isHidden can be set to "true" so that the text or a button gets invisible if v-if="!isHidden" is added to the element of your choice.

Have a look at this easy snippet:

var myApp = new Vue({
  el: '#myApp',
  data: {
    isHidden: false
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="myApp">
  <button v-on:click="isHidden = true">Hide text</button>
  <button v-on:click="isHidden = !isHidden">Toggle text</button>

  <h1 v-if="!isHidden">Hide me</h1>
</div>

Hide the button onClick is possible using this code:

var myApp = new Vue({
  el: '#myApp',
  data: {
    isHidden: false
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="myApp">
  <button v-if="!isHidden" v-on:click="isHidden = true">Hide text</button>
</div>

Upvotes: 8

Related Questions