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>

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

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

Answer 1

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

data:{
  clicks : 0
},

您在关联的视频的评论中解决了这个问题。如果您注意到，在添加计算后，他实际上从未运行过代码。

那就是说我在开始的时候自己用他的视频和课程作为资源。它们在很大程度上都非常出色。

计算属性＆＃34; counter＆＃34;已在数据中定义

1 个答案: