更改VUE组件中的数据值

Question

我从VUE开始，然后在单击按钮时进行测试以更改值，但是无法正常工作

    <template>
  <div class="row">
    {{ show }}
    <div class="col-md-4">
      <button class="btn btn-primary" @click="change_show">Good</button>
    </div>
    <div class="col-md-4">
      <button class="btn btn-primary">Bad</button>
    </div>
    <div class="col-md-4">
      <button class="btn btn-primary">Food</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "buttons",
  data(){
    return{
      show: true
    }
  },
  methods:{
    change_show(event){
      show = !show;
    }
  }
}
</script>

<style scoped>

</style>

，我会收到此错误，

Uncaught ReferenceError: show is not defined

如何访问变量并更改它？

Answer 1

您已经错误地声明了变量，应在返回中添加show（以及所有反应性变量）：

data(){
  return{
    show: true
  };
},