$ q.notify handler executed without permission

[selfee-jp]

Hello.

I want to execute by pressing a button.
But it runs without pressing a button.
Shouldn't this be written?
thank you.

actions: [
      { label: 'Open', color: 'white', handler: this.MessageReceivedOpen( payload) }
]

this.$q.notify({
function test ( payload ) {
        this.$q.notify({
            progress: true,
            html: true,
            top,
            message: message.body,
            color: 'primary',
            actions: [
                  { label: 'Open', color: 'white', handler: this.MessageReceivedOpen( payload) }
            ]
        });
}

function MessageReceivedOpen ( payload ) {
   alert(payload);
}

Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 18.6.0

Global packages
  NPM - 8.14.0
  yarn - Not installed
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.3
  cordova - 11.0.0

Important local packages
  quasar - 2.7.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.7 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.2
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.6 -- Babel compiler core.
  webpack - 5.73.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - 3.6.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 3.6.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 3.6.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - 3.6.0 -- Capacitor: Cross-platform apps with JavaScript and the web

Quasar App Extensions
  @quasar/quasar-app-extension-qcalendar - 4.0.0-beta.15 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar

[MilosPaunovic]

https://codepen.io/milospaunovic/pen/YzaxBKP?editors=1010

[selfee-jp]

MilosPaunovic
thank you.

Isn't the following program a problem?
Pass arguments to handler.

<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-btn color="purple" @click="showNotif" label="Show Notifications"></q-btn>
  </div>
</div>

const { useQuasar } = Quasar;

const app = Vue.createApp({
  setup() {
    const $q = useQuasar();
    const alerter = function ( messgae ) {
      alert("This is notification handler " + messgae); // <-- Called without permission.
    };
    return {
      showNotif() {
        $q.notify({
          message: "Jim just pinged you.",
          color: "primary",
          avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
          actions: [{ label: "Click me", color: "white", handler: alerter("message") }]　// <-- If you pass an argument.
        });
      }
    };
  }
});

app.use(Quasar, { config: {} });
app.mount("#q-app");

[selfee-jp]

Is this a bug?
Not resolved.

[pdanpdan]

To summarize:

• you call a function (alerter("message"))
• you wonder why the function is executed :)))))

[MilosPaunovic]

The solution to your issue is to write it like this: handler: () => alerter("message")

[selfee-jp]

Milos Paunovic
thank you.

What if?
How do you receive the arguments?

let message = "Test";

actions: [{ label: "Click me", color: "white", handler: (message) =>alerter(message) }]

It will be undefined.

const { useQuasar } = Quasar;

const app = Vue.createApp({
  setup() {
    const $q = useQuasar();
    const alerter = function (message) {
      alert("This is notification handler :" + message);
    };
    let message = "Test";
    return {
      showNotif() {
        $q.notify({
          message: "Jim just pinged you.",
          color: "primary",
          avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
          actions: [{ label: "Click me", color: "white", handler: (message) =>alerter(message) }]
        });
      }
    };
  }
});

app.use(Quasar, { config: {} });
app.mount("#q-app");

[selfee-jp]

Is this OK?

let message = "Test";
return {
      showNotif() {
        $q.notify({
          message: "Jim just pinged you.",
          color: "primary",
          avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
          actions: [{ label: "Click me", color: "white", handler: function(message) =>alerter(message) }]
        });
      }
    };

function(message) =>alerter(message)