在Vue组件中隐藏具有功能的按钮答案

【问题标题】：hide button with a function in vue component在Vue组件中隐藏具有功能的按钮
【发布时间】：2020-02-24 01:31:39
【问题描述】：

如何通过start函数隐藏按钮？

ReferenceError: "assignment to undeclared variable 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>

【问题讨论】：

标签： vue.js vuetify.js nuxt.js

【解决方案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>

【讨论】：

【解决方案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

【讨论】：