ionic-vue-inputs.vue

/**
 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>