How to listen to 'ionPickerColChange' event

Ionic Framework Ionic Vue
1

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

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
3

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’.

4

The technique used in this StackBlitz seems to get the column picker updated to show its new values. In my case I’m updating the values of the 2nd column, so it’s:

picker.addEventListener('ion-picker-col-change', async event => {
    // First set new_column_options as appropriate using the properties in event.detail, then...
    picker.columns[1].options = new_column_options;
    picker.columns = JSON.parse(JSON.stringify(picker.columns));
});