Skip to content

Instantly share code, notes, and snippets.

@mlynch
Last active November 27, 2021 01:30
Show Gist options
  • Save mlynch/2ff3692341276ba959fea96a620097f9 to your computer and use it in GitHub Desktop.
Save mlynch/2ff3692341276ba959fea96a620097f9 to your computer and use it in GitHub Desktop.
/**
Ionic Vue 0.0.8-next prerelease adds support for v-model to all Ionic inputs.
To try it out, run
npm install @ionic/vue@next
*/
<template>
<div class="ion-page">
<ion-header>
<ion-toolbar>
<ion-title>Form</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<form @submit.prevent="submitForm">
<ion-list>
<ion-item>
<ion-label position="floating">Custom</ion-label>
<IonInputVue v-model="user.custom" />
</ion-item>
<ion-item>
<ion-label position="floating">Select</ion-label>
<IonSelectVue v-model="user.pet">
<ion-select-option value="cats">Cats</ion-select-option>
<ion-select-option value="dogs">Dogs</ion-select-option>
</IonSelectVue>
</ion-item>
<ion-item>
<ion-label position="floating">Date</ion-label>
<IonDatetimeVue v-model="user.date" />
</ion-item>
<ion-item>
<ion-label position="floating">Address</ion-label>
<IonInputVue v-model="user.address"></IonInputVue>
</ion-item>
<ion-item>
<ion-label position="floating">Notes</ion-label>
<IonTextareaVue v-model="user.notes"></IonTextareaVue>
</ion-item>
<ion-item>
<ion-label position="floating">Toggle</ion-label>
<IonToggleVue v-model="user.isCool"></IonToggleVue>
</ion-item>
<ion-item>
<ion-label position="floating">Radio</ion-label>
<IonRadioVue v-model="user.enabled" value="enabled"></IonRadioVue>
</ion-item>
<ion-item>
<ion-label position="floating">Checkbox</ion-label>
<IonCheckboxVue v-model="user.large"></IonCheckboxVue>
</ion-item>
<ion-item>
<ion-label position="floating">Search</ion-label>
<IonSearchbarVue v-model="user.query"></IonSearchbarVue>
</ion-item>
<ion-item>
<ion-label position="floating">Toggle</ion-label>
<IonRangeVue min="-200" max="200" color="secondary" v-model="user.range">
<ion-label slot="start">-200</ion-label>
<ion-label slot="end">200</ion-label>
</IonRangeVue>
</ion-item>
</ion-list>
<ion-button expand="block" type="submit">Submit</ion-button>
</form>
</ion-content>
</div>
</template>
<script>
export default {
name: "myform",
methods: {
submitForm() {
console.log('Submitting form', this.user);
}
},
data() {
return {
user: {
name: 'Max',
address: 'Home',
custom: 'This is custom',
date: '',
date2: '',
range: 100,
isCool: false,
notes: 'Very legal, very cool',
large: false,
query: 'This is a query'
}
}
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment