[FIXED] How to get Ionic ion-alert inputs response using vuejs

Issue

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.

Answered By – Bruno Freire

Answer Checked By – Terry (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published