Vue组件点击按钮修改data值报show未定义错误如何解决

你代码里的show是定义在组件data()返回对象里的响应式属性，不会自动注入到methods方法的局部作用域里，直接写show = !show时，JS引擎在当前函数作用域、全局作用域都找不到名为show的变量，就会抛出show is not defined的引用错误。

你用的是Vue2选项式API写法，所有data里定义的属性、methods里定义的方法，都会被挂载到当前组件实例上，在脚本逻辑（methods、计算属性、生命周期钩子等）里访问的时候，必须加this.前缀指向当前组件实例。
修正后的change_show方法代码如下：

methods:{
  change_show(event){
    this.show = !this.show;
  }
}

• 模板里写{{ show }}、@click="change_show"的时候不需要加this，是因为Vue做模板编译时会自动绑定组件实例上下文，只有<script>标签里的逻辑需要手动加this访问
• 不要把methods里的方法写成箭头函数，箭头函数没有自己的this绑定，会继承外层作用域的this，导致指向不对，访问不到组件上的属性
• 修改完成后点击Good按钮，页面上渲染的show值就会在true和false之间正常切换，不会再抛出引用错误

内容的提问来源于stack exchange，提问作者dr_fg2