ionic-frameworkasync-awaites6-promiseionic-vue

How to get Ionic ion-alert inputs response using vuejs


I am new to Ionic. I want to get ionic-alert inputs values ​​after pressing ok button as shown in the image bellow.

enter image description here

I tried using the following code :

async presentAlertPrompt() {
    const alert = await alertController
    .create({
        cssClass: 'my-custom-class',
        header: 'Confirmation',
        inputs: [
        {
            name: 'note',
            value: '',
            placeholder: 'Note desciptive',
        },
        {
            name: 'quantity',
            type: 'number',
            value: '',
            min: 1,
            label: 'Quanité',
            placeholder: 'Quanité'
        },
        {
            name: 'custome_price',
            type: 'number',
            value: '',
            min: 0,
            label: 'Prix à discuter',
            placeholder: 'Prix à discuter',
        },
        {
            name: 'customer',
            placeholder: 'Nom du client',
            value: '',
        },
        {
            name: 'phone',
            type: 'phone',
            placeholder: 'Téléphone du client',
            value: '',
        },
        ],
        buttons: [
        {
            text: 'Annuler',
            role: 'cancel',
            cssClass: 'secondary',
            handler: () => {
            console.log('Confirm Cancel')
            },
        },
        {
            text: 'Ok',
            handler: () => {
            console.log('Confirm Ok  ')
            },
        },
        ],
    });
    return alert.present();
},

But when I call this method from another method I get promise object instead of input values :

onSelling(){
    const confirm = this.presentAlertPrompt()
    console.log('confirm >>>>>>>>>> : ', confirm)
    //this.getCurrentPosition()
},

confirm >>>>>>>>>> : Promise { : "pending" } : "fulfilled" : undefined : Promise.prototype { … }

I also tried to use then and Async Await but I get undefined.

onSelling(){
    this.presentAlertPrompt().then((res) => {
        console.log('res ->>>>>>>>>>>>>>> ', res)
    },
    (err) => {
        console.log('err ->>>>>>>>>>>>>>> ', err)
    })
},

Solution

  • You can receive all data in the .then((response) => {}) promisse or await return. A property called "data" will contains all the form filled.

    export default defineComponent({
        name: "ComponentExample",
        methods: {
            async openAlertController(){
                const alert = await alertController.create({
                    header: 'Insert your link here:',
                    buttons: [
                        {
                            text: 'Cancel',
                            role: 'cancel'
                        },
                        {
                            text: 'OK',
                            role: 'confirm',
                        }
                    ],
                    inputs: [
                        {
                            placeholder: 'Type the url',
                        }
                    ]
                });
                
                await alert.present();
                
                const result = await alert.onDidDismiss();
                const resultData = result.data;
                console.log(resultData)
            }
        }
    });
    

    The console will output all the data.