Why does Vuejs not pickup changes when watching a momentjs?

Question

Per this question here, Vuejs: Computed property not updating the view, I am watching for changes to instances of moment.js, and the view does not update.

Here's an excerpt from the original code that does not work:

set(value) { this.paidFinish = this.paidFinish.hour(value); }

Here's what I did to fix it:

set(value) { this.paidFinish = this.paidFinish.clone().hour(value); }

Why does Vuejs not detect the changes? The object is being accessed via this, and the property paidFinish is present in the initial data. (Initially it is set to '', but when the component is mounted it is set to a moment.)

vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Stephen Thomas
– Stephen Thomas

2018-07-03 00:37:34 +00:00
Commented Jul 3, 2018 at 0:37 — Stephen Thomas
– Stephen Thomas, Commented Jul 3, 2018 at 0:37

tony19 · Accepted Answer · 2022-07-15 22:00:52Z

Just had the same problem.

Turns out that the moment object mutates and always returns the same object, so Vue cannot add reactivity to it (see the docs for some clarification about this).

Workaround is either to use frozen-moment library or creating an interval in your component:

data () { return { time: '' } }, beforeMount () { setInterval(() => { this.time = moment().format('HH:mm:ss') }, 1000) }

Or...

Use date-fns that is immutable

Collectives™ on Stack Overflow

Why does Vuejs not pickup changes when watching a momentjs?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related