如何显示在 VueJS2 中计算的值？

Question

如何显示 VueJS2 内部计算的值？实际上我正在尝试使用计算属性返回值 click*2 。所以我使用表达式{{counter}} 显示输出。但我没有得到任何输出，起初它被设置为 0 （存储在数据中）。即使我没有使用v-once。那么为什么我的计数器值没有通过计算属性更新呢？

 <div id="app4">
    <p>counter : {{ counter }}</p>
    <p>clicks : {{ click }}</p>
    <button v-on:click="increment">increment</button>
  </div>

    <script>
      var vm = new Vue({
        el: '#app4',
        data: {
           counter:0,
           click: 0,
        },
       methods: {
           increment() {

               this.click++;
           }
       },
       computed: {
           counter() {
               return this.click * 2;
           }
       }
     });
    </script>

Answer 1

从数据中删除counter，它将起作用。您有两个相互影响的属性 - 一个位于 data 中，另一个位于 computed 中。