ionic/vue picker

ionic-vue--picker.js

<script>
export default {
  data() {
    return {
      pickerController: null
    };
  },

  mounted() {
    this.pickerController = document.querySelector('ion-picker-controller');
  },

  methods: {
    openPicker() {
      this.pickerController
        .create({
          columns: [
            {
              name: 'colour',
              options: [
                { value: 0, text: 'red' },
                { value: 1, text: 'green' },
                { value: 2, text: 'blue' }
              ]
            }
          ],
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel'
            },
            {
              text: 'Done',
              handler: value => console.log(value)
            }
          ]
        })
        .then(picker => picker.present());
    }
  }
};
</script>

<template>
  <ion-page>
    <ion-button @click="openPicker">Open Picker</ion-button>
    <ion-picker-controller />
  </ion-page>
</template>