CODEWITHSUNDEEP
vuejs2
Marcin Laskowski
Marcin Laskowski

Reputation: 27

Vue 2.0 - Computed issue

When on click start method "increment" variable "clicks" change but why it not change "counter". It should be because i have in counter function reference to "clicks" variable.

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/

Upvotes: 1

Views: 74

Answers (1)

Bert
Bert

Reputation: 82439

Don't define counter on your data. The computed value acts like a data property.

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;
    }
  }
});

Upvotes: 1

Related Questions