计算属性“counter”已在 data 中定义答案

【问题标题】：The computed property "counter" is already defined in data计算属性“counter”已在 data 中定义
【发布时间】：2017-11-20 15:18:56
【问题描述】：

这是我的代码

<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>

当我点击按钮时，计数器应该会显示两倍的点击次数，但它不起作用。

此代码正在运行：COMPUTED PROPERTIES | VueJS 2 | Learning the Basics。

【问题讨论】：

当你说它不起作用时，究竟是什么不起作用？它在做什么？

标签： vue.js

【解决方案1】：

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

data:{
  clicks : 0
},

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

也就是说，在我刚开始的时候，我自己使用了他的视频和课程作为资源。它们大部分都非常出色。

【讨论】：