Change data value with reactivity in vue

Question

I'm trying to reduce the value of a data property in every 1 second as follows:

  data() {
    return {
      timer: null
    }
  },

  mounted() {
    this.timer = 50;
    window.setInterval(() => {
      this.$set(this, 'timer', this.timer - 1)
    }, 1000);
  },

https://jsfiddle.net/eywraw8t/8179/

In the Vue devTool, the timer is not automatically updated. However, in the jsfiddle, the output is getting updated. Is this reactive? If not, how can I make it reactive?

When I open up the vue devtool, the timer value is not updating. I'm wondering if it's usual or the reactivity is lost. — user1012181
– user1012181, Commented Apr 2, 2018 at 20:22
If the reactivity was lost, who would be updating the DOM do you think? — connexo
– connexo, Commented Apr 2, 2018 at 20:24
Possible duplicate of Why doesn't the data get updated in Vue Dev Tools? — oniondomes
– oniondomes, Commented Apr 2, 2018 at 21:07

oniondomes · Accepted Answer · 2018-04-02 21:00:19Z

0

As @connexo already mentioned in the comment section timer is indeed reactive. This is why it changes its value in the template.

The only reason for this I could think of is that you don't include timer in the component template in your environment. There's a related Github issue describing that so far if there's no DOM elements affected by data, vue-devtools won't be updated either.

answered Apr 2, 2018 at 21:00

oniondomes

2,07315 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change data value with reactivity in vue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related