I there anyhow a possibility to get always the last mesage posted by this.$q.notify by the ‘onDismiss’ handler?

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  created () {
    this.$q.notify.setDefaults({
      onDismiss: () => this.callNotify()
    })
  },
  methods: {
    callNotify () {
      // post here always the last notify message/caption
    }
  }
}
</script>

a look into the sources depicts that unfortunately onDismiss doesn’t have a param.

  remove (notif) {
      clearTimeout(notif.meta.timer)

      const index = this.notifs[notif.position].indexOf(notif)
      if (index !== -1) {
        if (notif.group !== void 0) {
          delete groups[notif.meta.group]
        }

        const el = this.$refs[`notif_${notif.meta.uid}`]

        if (el) {
          const { width, height } = getComputedStyle(el)

          el.style.left = `${el.offsetLeft}px`
          el.style.width = width
          el.style.height = height
        }

        this.notifs[notif.position].splice(index, 1)

        this.$forceUpdate()

        if (typeof notif.onDismiss === 'function') {
          notif.onDismiss()
        }
      }
    }
  },

any chance to extend it? (because it is a plugin, not a compoment)

@beets Thanks! Didn’t thought it was that easy.

It’s easy to disable an option but how can I put then a css class like text-decoration: line-through ?

Q-select has an options-selected-class property but imo it should have also an options-disabled-class prop for that purpose?!

Is there a chance to overwrite the CSS selector in the .vue file?
And if so, could someone give an example or hint?
(this below should be the class)

@beets thx again for your hints
Here’s my final release:

import Vue from "vue";
import { date, Notify, SessionStorage } from "quasar";

export default ({ Vue }) => {
  let lastMessage = "",
    lastCaption = "",
    keyInc = 0;
  SessionStorage.clear();

  const logNotify = (c, m) => {
    let stamp = `[${date.formatDate(Date.now(),"DD-MMM-YYYY HH:mm:ss" )}] ${c} : ${m}`;
    SessionStorage.set(`notifyKey${keyInc++}`, stamp);
    //console.log(SessionStorage.getAll());
  };

  Vue.prototype.$logNotify = params => {
    if (typeof params === "string") {
      params = { message: params }; // support basic string usage
    }
    lastCaption = params.caption ? params.caption : "";
    lastMessage = params.message;

    Notify.create({
      ...params,
      onDismiss: () => {
        logNotify(lastCaption, lastMessage);
      }
    });
  };
};

@beets got it now somehow.
This boot file works for me :

import { SessionStorage } from "quasar";
import Vue from "vue";
import { date, Notify } from "quasar";

export default ({ Vue }) => {
  let lastMessage = "",
    lastCaption = "",
    keyInc = 0;
  SessionStorage.clear();
  
  const logNotify = (c, m) => {
    let stamp =
      "[" + date.formatDate(Date.now(), "HH:mm:ss") + "] " + c + ":" + m;
    SessionStorage.set("notifyKey" + keyInc++, stamp);
    console.log(SessionStorage.getAll());
  };

  Vue.prototype.$logNotify = params => {
    if (typeof params === "string") {
      params = { message: params }; // support basic string usage
    }
    lastCaption = params.caption ? params.caption : "";
    lastMessage = params.message;
    const oldOnDismiss = logNotify;

    Notify.create({
      ...params,
      onDismiss: () => {
        if (typeof oldOnDismiss == "function") {
          oldOnDismiss(lastCaption, lastMessage);
        }
      }
    });
  };
};

Thanks a lot

@beets Thanks again.
My goal is to log all notify messages in a Sessionstorage and to list them all when user clicks a certain button on the main page.
I want to wrap them with an additional timestamp and maybe also the caption (if there was one set)

So with your apporach, it doesn’t seem to be somehow necessary to put stuff into App.vue.
Your Notify boot file will be sufficient for that (as far as I may understood it)

I will try your suggestions within the next days. One little imperfection is, to refactor all my $q.notifes in the sources with $myNotify
But Ok, that’s nothing bad

Btw and OT: How Can I format here code tokens in that red/filled style?

Thanks, but I must confess, that I don’t understand your example at all, so that I’ll be not able to tweak it right.
How does “myNotify” inhertis all the things of Notify i.e.?

I there anyhow a possibility to get always the last mesage posted by this.$q.notify by the ‘onDismiss’ handler?

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  created () {
    this.$q.notify.setDefaults({
      onDismiss: () => this.callNotify()
    })
  },
  methods: {
    callNotify () {
      // post here always the last notify message/caption
    }
  }
}
</script>

a look into the sources depicts that unfortunately onDismiss doesn’t have a param.

  remove (notif) {
      clearTimeout(notif.meta.timer)

      const index = this.notifs[notif.position].indexOf(notif)
      if (index !== -1) {
        if (notif.group !== void 0) {
          delete groups[notif.meta.group]
        }

        const el = this.$refs[`notif_${notif.meta.uid}`]

        if (el) {
          const { width, height } = getComputedStyle(el)

          el.style.left = `${el.offsetLeft}px`
          el.style.width = width
          el.style.height = height
        }

        this.notifs[notif.position].splice(index, 1)

        this.$forceUpdate()

        if (typeof notif.onDismiss === 'function') {
          notif.onDismiss()
        }
      }
    }
  },

any chance to extend it? (because it is a plugin, not a compoment)

I found the pitfall in my case: forgot to put ‘keep-alive’ into q-tab-panels prop.
Sorry for that.
But nevertheless : it would be rather helpful to understand better what this promises really do.

Edit: to me it seems to be that, promiseChain is only a string - and not a function.
How could this be “then()'able” then?

@metalsadman I have the same approach as JJ and I was first glad, to find this post here.
But indeed: it doesn’t work to me, because the unvisible tabs are all undefined then (this.$refs.age == undefined i.e. submitting on name-tab ).
Why is your codepen however working?
Could you pls. explain a bit more in detailed how your travers method is working? (And why this doesn’t seemed to be enough to get ALL other q-input refs defined?)

 discoverTabs() {
      // traverse the tabs to discover its content
      let traversal = this.tabNames.reduce((promiseChain, item) => {
        return promiseChain.then(() => new Promise(resolve => {
              console.log("done with", item)
              resolve()
              this.$refs.tabs.goTo(item)
            })
        )
      }, Promise.resolve())
      
      traversal.then(() => {
        console.log("done")
        this.$refs.tabs.goTo('name')
      })
    }

So is there a chance to check all validations of the q-form in onSubmit?
Or do I really should use q-tab w/o q-tab-panels and define them all with a v-show?

Edit: as remark: I have more than one q-input component per each tab-panel. Is that maybe a cause? And your example of the travers method doesn’t cope this?

I got a q-form with some q-tabs inside and inside the q-tab some q-inputs

My question is: is it somehow avoidable to write 3 times i.e. the same attribute name?
( v-model = name = ref = “attributename” )

so only to write it once per q-input (for v-model i.e.) and all other attributes (ref, name,…) got the same val

             <q-input
                v-model="domain"
                name="domain"
                ref="domain"
                autofocus
                :label="$t('domain.Label')"
                :hint="$t('domain.hint')"
                maxlength="50"
                :rules="[val => !!val || $t('txtRequired')]"
              />
              <q-input
                v-model="db_server"
                name="db_server"
                ref="db_server"
                :label="$t('db_server.Label')"
                :hint="$t('db_server.hint')"
                maxlength="100"
                :rules="[val => !!val || $t('txtRequired')]"
              />