How do I pass data to my dialog?

[nicroto]

I am creating custom components for my dialogs.

How do I pass data (parameters/context/etc.) to my dialog?

[symonsoft]

Through the options.

[nicroto]

Through the options.

Are you suggesting that I add a property in the passed options (with name that's not being used by system property of the commponent) and then I will be able to read that within my custom component? Are options available through the DialogMixin?

[symonsoft]

Yes.

[serkandemirel0420]

How do we use passed property value in 'message' property? Like 'Do you want o delete x named item?'

[serkandemirel0420]

  <button v-confirm="{
                            loader: false,
                            ok: confirm, cancel: cancel,
                            okText: 'Ja',
                            cancelText: 'Nein',
                            reverse: true,
                            tooldid : 'sdsdsdsd',
                            message: `Möchten Sie die Wartung beim Werkzeug [+:tooldid] durchführen?`,
                            dataset:tool}" :data-tool="tool.ID">
                        Wartung
                    </button>

This gives a syntax error.

[Godofbrowser]

@serkandemirel0420 You can try compose your message completely before passing it to the dialog like this:

message: `Do you want o delete ${itemName} named item?`

We're only replacing placeholders in strings that are built in. For message, you have to compose the message yourself. Your code should look similar to this:

<button v-confirm="{
                            loader: false,
                            ok: confirm, cancel: cancel,
                            okText: 'Ja',
                            cancelText: 'Nein',
                            reverse: true,
                            message: `Möchten Sie die Wartung beim Werkzeug ${tool.ID} durchführen?`,
                            dataset:tool}" :data-tool="tool.ID">
                        Wartung
                    </button>

[Godofbrowser]

Thank you @symonsoft That solution should work. @nicroto did it work for you?

[serkandemirel0420]

@Godofbrowser That indeed worked. Thanks!

[darrensapalo]

For a more graphic explanation, you can pass data to your custom vuejs dialog component via the options used to create the dialog as seen below (I used options.metadata property as my own custom property):

this.$dialog.confirm('What do you want to modify in this workflow?', {
      view: 'workflow-editor',
      html: true,
      animation: 'fade',
      backdropClose: true,
      metadata: 'The quick brown fox jumps over the lazy dog.'
    })

The options which is used to generate the confirm or alert dialog is actually used as a Vue prop. You can see that from the component, you can access this custom property from options. (See metadata property under options prop).