Vue 2.0 - 计算问题

Question

当点击开始方法“增量”变量“点击”改变但为什么它不改变“计数器”。这应该是因为我在计数器函数中引用了“click”变量。

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

https://jsfiddle.net/freeq343/b7fyeyxm/

Answer 1

不要在数据上定义计数器。计算值的作用类似于数据属性。

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