Updating objects in an array of objects using Vue.set/this.$set
timrchavez opened this issue · comments
Before I describe the problem, I just want to say how much I love this module, and want to thank you for taking the time to create it for us.
I'd like to be able to use objects.sync
and an array of objects to control individual snackbars. This all works well when adding and removing objects from the array, but I can't seem to update objects within the array properly using the this.$set()
method like you've used with messages.sync
and an array of strings in your demo
My functions look something like this:
addNotification(key, message, color, timeout) {
const object = {
message,
color,
timeout,
}
this.actions.push(object)
const index = this.actions.length - 1
this.actionsIndex[key] = index
console.log(`addNotification with index: ${this.actionsIndex[key]}`)
console.log(this.actions[this.actionsIndex[key]])
},
updateNotification(key, message, color, timeout) {
if (key in this.actionsIndex) {
const object = {
message,
color,
timeout,
}
this.$set(
this.actions,
this.actionsIndex[key],
Object.assign({}, this.actionsIndex[key], object)
)
console.log(`updateNotification with index: ${this.actionsIndex[key]}`)
console.log(this.actions[this.actionsIndex[key]])
}
},
When I call updateNotification
and use this.$set()
method to replace the object in the array, rather than updating v-snackbar
with the changed properties, the v-snackbar
message gets updated to the string representation of the object. For example,
Any ideas on how to fix this? I'd really like to be able to update the timeout
and color
on an existing notification. Thanks very much!
Poked the code and saw it was doing exactly what it was suppose to be doing which I do not believe is expected behavior for objects. Hope the ideas outlined in my PR seem reasonable. Sorry I was unable to give you something more complete / tested.
It should be fixed with v3.2.2 – thanks