Question

我正在他的Udemy的VueJS课程中与 MaximilianSchwarzmüller学习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

尝试：

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

Answer 3

您的脚本将在文档准备就绪之前执行，因此Vue将找不到要装入的元素。

就像已经提到的其他一样-您的data属性应该是一个使每个实例具有唯一数据对象的函数。

document.addEventListener('DOMContentLoaded', mountVue);

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

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

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

Answer 4

问题实际上是这样的：

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

我使用了错误的速记语法。我不得不使用@符号（用于事件）。

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

我在CodePen上查看此示例，发现它们的data对象不是 function 。 data 对象必须是一个函数吗？他们的好处我不知道吗？

我现在对Vue还是很陌生，我正在从Max的Udemy课程中学到东西。非常感谢。

Answer 5

对于事件，您必须使用my_list = [['test1', 1,2,3,4], ['test2', 2,3,4,5]]符号，而不是用于绑定道具的@。

VueJS-单击按钮时计数器不会增加

5 个答案: