更改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
};
},