Nuxt.js实例未定义属性或方法：计数器自增功能实现异常

嘿，我来帮你搞定这个问题！你遇到的这个报错，核心原因有两个，咱们一步步来修正：

1. 修正data选项的写法 #

在Vue（包括Nuxt）的组件里，data必须是一个返回对象的函数，而不能直接写成一个对象。直接写对象的话，组件实例无法正确绑定这个数据，就会抛出“property or method not defined”的错误。

你原来的写法：

data: { counter: 0 },

要改成这样：

data() {
  return {
    counter: 0
  }
},

2. 移除test方法里多余的参数 #

你的test方法里定义了counter参数，但实际上你要操作的是组件实例上的this.counter，这个参数不仅多余，还会导致你console.log(counter)输出的是undefined（因为点击按钮时并没有传参）。

把方法改成这样：

methods: {
  test() {
    this.counter += 1
    console.log(this.counter) // 这里要打印实例的counter，所以用this.counter
  }
},

完整修正后的代码 #

<template>
  <div class="container">
    <div>
      <h1>London Weather</h1>
      <div id="example-1">
        <button @click="test()">Add 1</button>
        <p>The button above has been clicked {{ counter }} times.</p>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    test() {
      this.counter += 1
      console.log(this.counter)
    }
  },
}
</script>

为什么要这么改？ #

• Vue组件的data用函数返回对象，是为了保证每个组件实例都拥有独立的数据副本，避免多个组件实例共享同一套数据导致的意外问题。
• 方法里的多余参数会干扰你对实例属性的访问，而且点击按钮触发方法时并没有传递参数，所以参数值会是undefined，去掉它才能正确操作this.counter。

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