From 9317f6eb41032b4fedc78a135898005eb18ecda8 Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Wed, 25 Aug 2021 15:50:33 -0600
Subject: [PATCH] docs(picker): add a simple picker example for Vue (#23818)

There was previously no example for a vue picker, this adds one.

closes #2053
---
 core/src/components/picker/usage/vue.md | 53 +++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 core/src/components/picker/usage/vue.md

diff --git a/core/src/components/picker/usage/vue.md b/core/src/components/picker/usage/vue.md
new file mode 100644
index 0000000000..6383262d41
--- /dev/null
+++ b/core/src/components/picker/usage/vue.md
@@ -0,0 +1,53 @@
+```vue
+<template>
+  <div>
+    <ion-button @click="openPicker">SHOW PICKER</ion-button>
+    <p v-if="picked.animal">picked: {{ picked.animal.text }}</p>
+  </div>
+</template>
+
+<script>
+import { IonButton, pickerController } from "@ionic/vue";
+export default {
+  components: {
+    IonButton,
+  },
+  data() {
+    return {
+      pickingOptions: {
+        name: "animal",
+        options: [
+          { text: "Dog", value: "dog" },
+          { text: "Cat", value: "cat" },
+          { text: "Bird", value: "bird" },
+        ],
+      },
+      picked: {
+        animal: "",
+      },
+    };
+  },
+  methods: {
+    async openPicker() {
+      const picker = await pickerController.create({
+        columns: [this.pickingOptions],
+        buttons: [
+          {
+            text: "Cancel",
+            role: "cancel",
+          },
+          {
+            text: "Confirm",
+            handler: (value) => {
+              this.picked = value;
+              console.log(`Got Value ${value}`);
+            },
+          },
+        ],
+      });
+      await picker.present();
+    },
+  },
+};
+</script>
+```