Vue.js中如何在methods里访问data中定义的变量？

嘿，我一眼就发现问题所在啦！你在count方法里直接写counter++是找不到这个变量的——Vue组件中，data里定义的属性需要通过组件实例的this关键字来访问哦。

问题原因 #

Vue会把data函数返回的对象里的属性，挂载到组件的实例上。所以在methods的方法中，必须通过this.counter才能访问到你在data里定义的计数器变量。直接写counter的话，JavaScript会把它当成一个未声明的局部变量，自然就会抛出“未定义”的错误啦。

修正后的代码 #

<template>
  <div class="button-container">
    <button class="counter-button" v-on:click="count">Click Me</button>
    <p>Button has been clicked {{ counter }} times</p>
  </div>
</template>

<script>
export default {
  name: 'AnotherComponent',
  data: function() {
    return {
      counter: 0
    }
  },
  methods: {
    count: function() {
      // 这里要加上this来访问组件实例上的counter属性
      this.counter++;
    }
  }
}
</script>

另外补充个小tip：如果你用ES6的箭头函数来定义count方法的话，还要注意箭头函数没有自己的this，它会继承外层上下文的this，这时候反而可能出问题，所以Vue的methods里建议用普通函数哦～

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