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) } } ...