Passing props and data

Passing Values of Props

It will be not so useful if we will not have the option to pass data to and from а component. There are several ways to deal with it. First of all, you can pass data to the second argument of the createConfirmDialog function. Data must be an object with names of properties matching to props of the component you use as dialog. For example, if a component has a prop with the name title we have to pass this { title: 'Some Title' }. So these will be the initial props values that the dialog component will receive.

You can change props values during the calling reveal function by passing to its object with props data. So you can call the reveal function several times with different props. This is an excellent way to reuse the same dialog in different situations.

  const dialog = createConfirmDialog(ModalComponent, { title: 'Some Title' })

Passing Data

And finally, you can pass any data to emit functions inside your modal dialog component: confirm and cancel. Hooks onConfirm and onCancel will receive this data. Also, it will be passed by Promise, so you can use the async/await syntax if you prefer.

For example:

App.vue
<script setup>
  import { createConfirmDialog } from 'vuejs-confirm-dialog'
  import ConfirmAge from 'src/components/ConfirmAge.vue'
  const age = ref(null)
  const dialog = createConfirmDialog(ConfirmAge)
  if(!age.value) {
    dialog.reveal()
  }
  dialog.onConfirm((data) => {
    age.value = data
  })
</script>
/components/ConfirmAge.vue
<script setup>
  const emit = defineEmits(['confirm', 'cancel'])
  const age = ref(null)
  const onAgeConfirm = () => {
    emit('confirm', age.value)
  }
</script>
<template>
  <h1>Please, input your real age</h1>
  <input v-model="age"/>
  <button @click="onAgeConfirm">Confirm</button>
</template>

Props Behavior Options

Unfortunately, the way of passing props is not so clear to the developers. The problem occurs when you try to reuse a dialog instance already created with createConfirmDialog. See also the issue.

Let's consider this process step by step. Props values ​​are assigned three times, the first time is default props values, in the component, this package does not show up on them in any way. The second time occurs on creating an instance of the dialog, let's define these values ​​as initial props. The third time passing values ​​is possible when the user prompts the dialog using the reveal method. If you don't set the props behavior options, then each time you pass values, this data will be saved.

For example, if you have an alert component and you called it with the message "Authorization failed!", then next time if you don't pass a new message value, it will show this message again.

Perhaps it will be convenient if every time after closing the dialog, the values ​​of the props will be reset to the initial or even default values. For this functionality, props transfer settings have been added.

There are only two options:

  • chore - if true will tell to function reset values after closing dialog
  • keepInitial - if true reset props values to initial values, otherwise to default values of the component

For example:

  const dialog = createConfirmDialog(
    ModalComponent,
    { message: 'Some message...' }, // Initial props values
    { chore: true, keepInitial: true }
  )
Table of Contents