How to use ion-picker in Vue?

Ionic Framework Ionic Vue
1

I want to implement ion-picker with Ionic Vue, but am struggling with finding a good example.

Can someone help me with rewriting this code for Vue?

Regards,
Tetsuya

2

I updated this project to work with latest version on Ionic Vue https://github.com/aaronksaunders/ionic-vue-picker-sample

<template>
  <ion-app class="ion-padding">
    <ion-content>
      <ion-button @click="openSimplePicker">SHOW PICKER</ion-button>
    </ion-content>
  </ion-app>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { IonApp, pickerController, IonButton, IonContent } from "@ionic/vue";
export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonContent,
    IonButton,
  },
  setup() {
    // HELPER FUNCTIONS FOR PICKERS
    const getColumns = (numColumns, columnOptions) => {
      let columns = [];
      for (let i = 0; i < numColumns; i++) {
        let len = columnOptions[i].data.length;
        // if a na,e is provided then set the object to the
        // the name provided
        let colName = columnOptions[i].name || `col-${i}`;
        let col = {
          name: colName,
          options: getColumnOptions(i, len, columnOptions),
        };
        columns.push(col);
      }
      return columns;
    };

    const getColumnOptions = (
      columnIndex: any,
      numOptions: any,
      columnOptions: any
    ) => {
      let options = [];
      for (let i = 0; i < numOptions; i++) {
        // if there is no value property provided in the column data
        // then set value to the row index
        if (typeof columnOptions[columnIndex].data[i] == "object") {
          options.push({
            text: columnOptions[columnIndex].data[i % numOptions][0],
            value: columnOptions[columnIndex].data[i % numOptions][1],
          });
        } else {
          options.push({
            text: columnOptions[columnIndex].data[i % numOptions],
            value: i,
          });
        }
      }
      return options;
    };

    const openSimplePicker = async () => {
      // set the arry for the column information, you can set the name of the column
      // and the array of data that should be rendered in the column
      let colOptions = [
        {
          name: "animal",
          data: ["Dog", "Cat", "Bird", "Lizard", "Chinchilla"],
        },
      ];
      // now create the picker, but first you need to create the columns
      // in the proper format for ionic vue to deal with them
      const picker = await pickerController.create({
        columns: getColumns(1, colOptions),
        buttons: [
          {
            text: "Cancel",
            role: "cancel",
          },
          {
            text: "Confirm",
            role: "confirm",
            handler: (value) => {
              console.log("Got Value", value);
              console.log(value);
              picker.dismiss(value, "confirm");
            },
          },
        ],
      });
      picker.onDidDismiss().then((v) => {
        console.log("onDidDismiss", v);
      });
      // present the picker
      await picker.present();
    };

    return {
      openSimplePicker,
    };
  },
});
</script>

<style>
</style>
2 Likes
3

Here’s another example, as barebones as I could possibly make it if you just need one column. Cheers!