change data value in vue component

Question

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

I get this error

Uncaught ReferenceError: show is not defined

How I can access to the variables and change it?

place show within the return object

J2R
– J2R

2022-06-15 10:17:08 +00:00
Commented Jun 15, 2022 at 10:17 — J2R
– J2R, Commented Jun 15, 2022 at 10:17

Jedupont · Accepted Answer · 2022-06-15 10:19:03Z

1

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

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

edited Jun 15, 2022 at 10:19

answered Jun 15, 2022 at 10:16

Jedupont

4371 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dr_fg2 Over a year ago

I made show changes on the question but is still not working

Jedupont Over a year ago

@dr_fg2 try to add this keyword: this.show = !this.show;

Collectives™ on Stack Overflow

change data value in vue component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related