Где / Как определить переменные в данных для методов Vue Js?

Question

Я изучаю Vue Js и создал простой счетчик кнопок, а в своем объекте методов я создал функцию щелчка для увеличения переменной счетчика.Я добавил счетчик к данным, но он продолжает сообщать мне, что счетчик не определен в count ().

<template>
   <div class="button-container">
      <button class="counter-button" v-on:click="count">Click Me</button>
      <p>Button has been clicked {{ counter }} times</p>
   </div>
</template>

<script>
   export default {
      name: 'AnotherComponent',
      data: function() {
         return {
            counter: 0
         }
      },
      methods: {
         count: function() {
            counter++;
         }
      }
   }
</script>

Answer 1

Ваш код ищет локальную переменную с именем counter, но вы ее никогда не определяли.

Вместо этого вы должны ссылаться на свойство instance , используя this.counter:

 count: function() {
    this.counter++;
 }

См. https://vuejs.org/v2/guide/index.html#Handling-User-Input для полного примера.