Vue.js deep watching of computed property using other computed property objects

Question

I am aware of deep watching of properties using the handler in the "watch" section, but I am not seeing how to make vue deep watch in a getter/setter computed property.

Essentially I have something like this, of which vue is not able to observe the changes.

How do I tell vue to observe the changes of "someComputedProperty"?

computed: { 
    someComputedProperty: {
      set (value) {
        this.someComputedPropertyObject[this.someOtherObject.id] = value;
      },

      get () {
        return this.someComputedPropertyObject[this.someOtherObject.id];
      }
    }
  }

Thanks in advance,

Erion

Computeds don't work like that. This is the case for a watcher. — Estus Flask
– Estus Flask, Commented Sep 13, 2021 at 6:37
Estus, thanks, but in my situation a watcher would not make a difference. I am looking and reasonably thinking that Vue should detect that the objects referenced in the computed property changed and should be able to notify of the change. @DecadeMoon’s recommendation is closer to what I was thinking. — Omeri
– Omeri, Commented Sep 13, 2021 at 13:19

tony19 · Accepted Answer · 2022-07-16 01:03:43Z

2

If someComputedPropertyObject is a Vue computed property, its value won't be made observable by design (if it creates a new object).

Furthermore, does someComputedPropertyObject have the this.someOtherObject.id property defined upfront? If not, you're creating a new property which Vue cannot observe. Use Vue.set (or this.$set) instead.

edited Jul 16, 2022 at 1:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 12, 2021 at 23:40

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

1 Comment

Omeri Over a year ago

Thanks for your thoughts. I will give that Vue.set a try. The object [this.someOtherObject] is a computed property (using a getter/setter) and it's the result of a user interaction.

Collectives™ on Stack Overflow

Vue.js deep watching of computed property using other computed property objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related