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

Question

I'm trying to get a counter to add 1 to a variable counter in a nuxtjs template. Not sure what is going on here:

<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

Here's one solution:

• Reference counter as this.counter
• data is a function which should return whatever data you need
• test doesn't need to take parameters as you are just changing the component's state rather than modifying some parameter you're passing in

<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

Try the following:

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