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

Question

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?

Solution

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>