Vue 2脚本标签中如何访问data属性？调用方法时变量未定义报错

报错原因很直接：在Vue的方法里直接访问data中的变量时没加this，导致JS引擎把变量当成全局变量查找，自然找不到定义在Vue实例内部的属性。

修正后的代码如下：

var app = new Vue({
  el: '#vueapp',
  data: {
    isShowDrop1: false,
    isShowDrop2: false,
  },
  methods: {
    drop_hide() {
      if (this.isShowDrop2 == false) {
        // Do nothing
      } else {
        this.isShowDrop1 = false
      }
    }
  }
});

核心说明 #

Vue会自动把data里的所有属性挂载到当前Vue实例上，在methods的方法中必须通过this来访问这些实例属性——这样不仅能正确读取/修改数据，还能触发Vue的响应式更新，保证视图和数据同步。直接写变量名的话，会跳过Vue实例作用域，去全局作用域查找，这就是报错的根源。

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