How to listen to 'ionPickerColChange' event

I have 3 columns in a picker. When the first column has been changed, the values for second and third column need to be updated (the same goes to the second column). I tried to listen to ionPickerColChange as below but it’s not working.

async openPicker(){
    const options = {
        buttons: [ ... ],
        columns:[
            { name: 'col_1', options: this.col_1 },
            { name: 'col_2', options: this.col_2 },
            { name: 'col_3', options: this.col_3 }
        ]
    };
    const picker = await pickerController.create(options);
    picker.addEventListener('ionPickerColChange', async event => {
        //update second and third column if first column has changed
        //update third column if second column has changed
    });
    picker.present();
}

Vue does not use camel case event names. If you are on Vue >= 3.0.6 try ion-picker-col-change. If you are on Vue <= 3.0.5 try ionpickercolchange. (There was a bug fixed in Vue 3.0.6 with event name bindings which is why the version matters)

2 Likes

Thanks for the solution. The new options have now been successfully assigned to the specific column after first/second column value has been selected but the picker doesn’t have any changes showing the new options. I have tried

picker.forceUpdate();

but will return error message ‘TypeError: picker.forceUpdate is not a function’.