Aymkdn / v-snackbars

Display the `v-snackbar` (from Vuetify) with a stack display

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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,
Screen Shot 2021-04-18 at 10 09 41 AM

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