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>

在这里观看直播

Answer 2

请尝试以下操作：

 <template> ... <button @click="test(1)">Add 1</button> ... </template> <script> ... methods: { test(count) { this.counter += count; console.log(this.counter) } } ...