VueJS - счетчик не увеличивается при нажатии на кнопку

Question

Я изучаю VueJS с Максимилианом Шварцмюллером в его курсе VueJS по Удеми, и когда я запускаю его пример на своей локальной машине, это не увеличивает мою переменную-счетчик.

<div id="app">
  <button :click="increase">Click me</button>
  <p>{{ counter }}</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increase() {
        return this.counter++
      }
    }
  })
</script>

Есть идеи, что не так с кодом?

Большое спасибо.

Answer 1

Data должна быть функцией:

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        counter: 0
      }
    },
    ...
  })
</script>

Answer 2

Вы должны использовать символ @ для событий вместо :, который используется для привязки реквизита.

<button @click="increase">Click me</button>

Answer 3

На самом деле проблема была в следующем:

<button :click="increase">Click me</button>

Я использовал неправильный синтаксис короткой руки.Вместо этого мне пришлось использовать знак @ (для событий).

<button @click="increase">Click me</button>

Я смотрел этот пример здесь на CodePen и заметил, что их объект data не является функция .Должен ли объект data быть функцией?Есть ли у них преимущества, о которых я не знаю?

Я сейчас новичок в Vue и учусь на курсе Макса по Udemy.Большое спасибо.

Answer 4

Ваш скрипт будет выполнен до того, как ваш документ будет готов, поэтому Vue не найдет ваш элемент для монтирования.

Также, как уже упоминалось, ваше свойство data должно быть функцией, чтобы сделать каждый экземпляр уникальным.объект данных.

document.addEventListener('DOMContentLoaded', mountVue);

function mountVue() {
  new Vue({
    el: '#app',

    data() {
      return {
        counter: 0
      };
    },

    methods: {
      increase() {
        return this.counter++;
      }
    }
  });
}

Answer 5

попробуйте это:

data: () => ({
   counter: 0,
})