docs(picker): add a simple picker example for Vue (#23818)

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

closes #2053
This commit is contained in:
Sarah Drasner
2021-08-25 15:50:33 -06:00
committed by GitHub
parent 9932e26a2e
commit 9317f6eb41

View File

@ -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>
```