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: [ ... ],
            { 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

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)


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


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