Vue computed property not updating

Question

I have an empty object data property

data() { return { chosen: {}, } }

Then I have a computed property the results of which are related with chosen property.

myComputed() { let result = 0 Object.entries(this.chosen).forEach(([key, value]) => { result = result + value }) return result

}

Then I have a method that actually changes the chosen property

setChosen(someValue) { this.chosen['key'] = someValue }

So when I call setChosen and adding a new value the myComputed is not executed and not updating my view value.

you are trying to access to your object attribute as array attribute within your computed method — Thamer
– Thamer, Commented May 16, 2019 at 14:02

tony19 · Accepted Answer · 2022-07-15 04:39:01Z

I believe it's caused by your computed method not detecting the change, read more here: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Try the folowing:

setChosen(someValue) { // IF no key is parsed this.$set(this.chosen, 'key', someValue) // IF key is parsed // this.$set(this.chosen, key, someValue) }

Obviously if someValue is only the value, you need to wrap the 'key' in quotes to directly name it: key. If your function is parsed a second value as a string, just use that directly.

Reactively set the new value

Collectives™ on Stack Overflow

Vue computed property not updating

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related