计算属性"counter"已在数据中定义

这是我的代码

<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 |学习基础知识。

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

data:{
  clicks : 0
},

此问题在您链接的视频的评论中得到解决。如果您注意到，他在添加计算后从未实际运行过代码。

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

相关内容

最新更新

热门标签：