Nuxtjs 属性或方法未在实例上定义

Question

我正在尝试让一个计数器将 1 添加到 nuxtjs 模板中的变量计数器。不知道这里发生了什么：

<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: {
    counter: 0
  },
  methods: {
    test: function(counter) {
      this.counter += 1
      console.log(counter)
    }
  },
}
</script>

Answer 1

这里有一个解决方案：

• 引用计数器为this.counter
• data 是一个函数，它应该返回你需要的任何数据
• test 不需要带参数，因为您只是更改组件的状态，而不是修改您传入的某些参数

<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: function() {
      this.counter += 1
      console.log(this.counter)
    }
  }
}
</script>

See it live here

Answer 2

尝试以下方法：

<template>
  ...
  <button @click="test(1)">Add 1</button>
  ...
</template>

<script>
...
methods: {
  test(count) {
    this.counter += count;
    console.log(this.counter)
  }
}
...