v-model 与 ionic4 组件数据绑定失败

一次刻骨铭心的错误
一个移动端 App 使用混合开发框架 Ionic 开发，但是小组成员不熟悉 Angular, React，所以最后决定使用 Vue，然而却在 <ion-select></ion-select> 这个标签上出现了大问题：

• 无论如何都获取不到 <ion-select-option></ion-select-option>中的值。

期间一度怀疑人生，甚至专门建个 Ionic + Angular 的示例，使用 [(ng-model)="xxx"] 发现数据是正常的。
阅读官方文档后发现

进行事件绑定便可实现目的

<ion-select placeholder="Select One" v-model="selectedOption">
  <ion-select-option v-for="(option, index) in options" :key="index" :value=option>{{ option }}</ion-select-option>
</ion-select>

<ion-select placeholder="Select One" :value="selectedOption" @ionChange="selectedOption=$event.target.value">
  <ion-select-option v-for="(option, index) in options" :key="index" :value=option>{{ option }}</ion-select-option>
</ion-select>

Google 搜索 v-model not working with ionic 就会发现很多答案

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