ion input v model

1/**
2 Ionic Vue 0.0.8-next prerelease adds support for v-model to all Ionic inputs.
3 
4 To try it out, run
5 
6 npm install @ionic/vue@next
7*/
8<template>
9  <div class="ion-page">
10    <ion-header>
11      <ion-toolbar>
12        <ion-title>Form</ion-title>
13      </ion-toolbar>
14    </ion-header>
15    <ion-content class="ion-padding">
16      <form @submit.prevent="submitForm">
17        <ion-list>
18          <ion-item>
19            <ion-label position="floating">Custom</ion-label>
20            <IonInputVue v-model="user.custom" />
21          </ion-item>
22          <ion-item>
23            <ion-label position="floating">Select</ion-label>
24            <IonSelectVue v-model="user.pet">
25              <ion-select-option value="cats">Cats</ion-select-option>
26              <ion-select-option value="dogs">Dogs</ion-select-option>
27            </IonSelectVue>
28          </ion-item>
29          <ion-item>
30            <ion-label position="floating">Date</ion-label>
31            <IonDatetimeVue v-model="user.date" />
32          </ion-item>
33          <ion-item>
34            <ion-label position="floating">Address</ion-label>
35            <IonInputVue v-model="user.address"></IonInputVue>
36          </ion-item>
37          <ion-item>
38            <ion-label position="floating">Notes</ion-label>
39            <IonTextareaVue v-model="user.notes"></IonTextareaVue>
40          </ion-item>
41          <ion-item>
42            <ion-label position="floating">Toggle</ion-label>
43            <IonToggleVue v-model="user.isCool"></IonToggleVue>
44          </ion-item>
45          <ion-item>
46            <ion-label position="floating">Radio</ion-label>
47            <IonRadioVue v-model="user.enabled" value="enabled"></IonRadioVue>
48          </ion-item>
49          <ion-item>
50            <ion-label position="floating">Checkbox</ion-label>
51            <IonCheckboxVue v-model="user.large"></IonCheckboxVue>
52          </ion-item>
53          <ion-item>
54            <ion-label position="floating">Search</ion-label>
55            <IonSearchbarVue v-model="user.query"></IonSearchbarVue>
56          </ion-item>
57          <ion-item>
58            <ion-label position="floating">Toggle</ion-label>
59            <IonRangeVue min="-200" max="200" color="secondary" v-model="user.range">
60              <ion-label slot="start">-200</ion-label>
61              <ion-label slot="end">200</ion-label>
62            </IonRangeVue>
63          </ion-item>
64        </ion-list>
65        <ion-button expand="block" type="submit">Submit</ion-button>
66      </form>
67    </ion-content>
68  </div>
69</template>
70
71<script>
72export default {
73  name: "myform",
74  methods: {
75    submitForm() {
76      console.log('Submitting form', this.user);
77    }
78  },
79  data() {
80    return {
81      user: {
82        name: 'Max',
83        address: 'Home',
84        custom: 'This is custom',
85        date: '',
86        date2: '',
87        range: 100,
88        isCool: false,
89        notes: 'Very legal, very cool',
90        large: false,
91        query: 'This is a query'
92      }
93    }
94  }
95};
96</script>