如何使用 vuejs 获取 Ionic 离子警报输入响应

Question

我是 Ionic 新手。我想在按确定按钮后获得

ionic-alert

输入值，如下图所示。

我尝试使用以下代码：

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();
},

但是当我从另一个方法调用此方法时，我得到的是 Promise 对象而不是输入值：

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

确认 >>>>>>>>>> : 承诺 { : "pending" } ：“满足” ： 不明确的 : Promise.prototype { … }

我也尝试使用

then

和

Async Await

但我得到

undefined

。

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

Answer 1

您可以接收

.then((response) => {})

承诺中的所有数据或等待返回。名为

"data"

的属性将包含所有填写的表格。

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)
        }
    }
});

控制台将输出所有数据。