计算的属性“计数器”已在数据中定义

Question

这是我的代码

<html>
<head>
    <script src="https://unpkg.com/vue"></script>
    <meta charset="utf-8">
</head>
<body>
   <div id="app">
       <button v-on:click="increase">plus</button>
       <p>Counter : {{ counter }}</p>
       <p>Clicks : {{ clicks }}</p>
    </div>

   <script>
       var app = new Vue({
           el:'#app',
           data:{
               counter : 0,
               clicks : 0
           },
           methods:{
            increase(){
                this.clicks++;

            }        
           },
           computed:{
            counter: function(){
                return this.clicks * 2;
            }

           } 
       });
    </script>

</body>
</html>

当我单击按钮时，计数器应使显示的点击次数增加一倍，但它不起作用。

这段代码可以正常工作：计算属性| VueJS 2 | 学习基础。

Answer 1

您counter的数据中有一个属性，并且您还有一个counter计算值。要修复您的代码，只需counter从数据中删除。

data:{
  clicks : 0
},

这在您链接的视频的评论中得到了解决。如果您注意到，他在添加计算后从未真正运行代码。

也就是说，当我开始时，我自己使用他的视频和课程作为资源。他们在很大程度上是优秀的。