скрыть кнопку с функцией в компоненте vue

Question

Как мне скрыть кнопку с помощью start функции ?

ReferenceError: "присвоение необъявленной переменной show"

<template>
  <v-layout>
        <v-btn v-show="showButton == true" @click="start">Start</v-btn>
  </v-layout>
</template>

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

Answer 1

Вот правильный синтаксис

<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>

Answer 2

К вашим данным внутри метода можно получить доступ через this.

Например:

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

Я предлагаю вам прочитать документы, чтобы лучше понять Vue. https://vuejs.org/v2/guide/index.html