change data value in vue component-CodePudding

I'm starting with vue and I'm making a test to change a value when a button is clicked , but is not working

    <template>
  <div >
    {{ show }}
    <div >
      <button  @click="change_show">Good</button>
    </div>
    <div >
      <button >Bad</button>
    </div>
    <div >
      <button >Food</button>
    </div>
  </div>
</template>

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

<style scoped>

</style>

I get this error

Uncaught ReferenceError: show is not defined

How I can access to the variables and change it?

CodePudding user response：

You have declared your variable incorrectly, you should add show (and all your reactive variables) in the return:

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