Tip: self-updating notifications

[davestewart]

Just thought I would share something I thought might need a feature request, but actually "just works".

I wanted to have a notification which could change its contents, so I could give the user some "actions" and display the results.

It turns out you can update the popup's content by simply updating the item data which is received in the slot scope:

The bit that needed some thinking was, how to get the item in the slot to a function that could update its values.

Very roughly, it works like this...

In the notification call:

• for options.text pass some HTML that can be interacted with / updated
• in the options.data parameter, pass a callback

In the slot:

• add a click handler to the element that will render the text
• intercept clicks, and pass both the event and slot parameters to the callback

In the callback:

• check the event target
• update local data as required
• set item.text to something new

In code, this looks something like this:

let count = 0

function getText () {
  return `Click <a data-action="count">here</a> to update the count: ${count}`
}

notify({
  text: getText(),
  data: {
    callback (event, item, close) {
      if (event.target.getAttribute('data-action') === 'count') {
        count++
      }
      if (count > 10) {
        close()
      }
      item.text = getText()
    }
  }
})

<template slot="body" slot-scope="{ item, close }">
  <div v-html="item.text" @click.prevent.stop="event => item.data.callback(event, item, close)" />
</template>

Hopefully this will be useful to someone.

[davestewart]

If this was a feature request, it would be nice to have an object returned from notify() which could be updated as well.

[github-actions[bot]]

Stale issue message