javascript - 计算 Prop 无法正常工作 Vue JS 2

Question

我正在按照 YT 上的 channel 学习 vue js，该视频是去年发送的，所以我认为由于 VueJS 本身的一些变化，它不起作用，但如果你们能帮助我，那就太好了

codeio链接:http://codepen.io/myrgato/pen/BWWxdQ

HTML

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f2f1e1c4b6aab6aab6" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

JS

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment(){
      this.clicks++;
    }
  },
  computed: {
    counter(){
      return this.clicks * 2; 
    }
  }
});

它应该计算点击量，然后使用计算属性显示一个等于点击次数乘以两倍的计数器，但由于某种原因它不起作用..

Answer 1

简短但完整的答案:

切勿对数据变量和计算使用相同的名称。

将数据和计算视为同一个对象，因此名称不能重复。