[Vuejs]-Hide button with a function in vue component

by

0👍

✅

Here is the right syntax

<template>
   <v-layout>
      <v-flex class="text-center">
         <v-btn v-show="show" color="primary" nuxt to="/bakim"@click="start">Start</v-btn>
         </v-flex>
      </v-layout>
</template>

<script>
export default {
   data: function() {
      return {
         show: true
      }
   },
methods: {
  start: function(event) {
     alert("hi ");
     this.show = false;
   }
 }
}
</script>

0👍

Your data inside a method can be accessed through this.

Like that :

export default {
  data: function() {
    return {
      show: true
    }
  },
  methods: {
    start: function(event) {
      alert("hi ");
      this.show = false;
    }
  }
}

I suggest you read through the docs to have a better understanding of Vue. https://v2.vuejs.org/v2/guide/index.html

Leave a comment