Ionic-v4 select/options & Vue, v-model not binding

Ionic Framework
1

The selected option is not binding to the v-model=“selectedOption”.
I put it up on codepen: https://codepen.io/mattabdi/pen/YJVVKm

all code:

<template>
  <ion-content>
    <ion-list-header>Issue Reporter</ion-list-header>

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

    <br/>

    <p>selectedOption: {{ selectedOption }}</p>
    <ion-button size="large" expand="block" @click="routeGo">Go</ion-button>
  </ion-content>
</template>

<script>

export default {
  data () {
    return {
      selected: '',
      selectedOption: '',
      menuOptions: [
        'Report New Issue',
        'Open Issues',
        'Log Off'
      ]
    }
  },
  methods: {
    routeGo () {
      switch (this.selectedOption) {
        case 'Report New Issue':
          break;
        case 'Open Issues':
          break;
        case 'Log Off':
          break;
        default:
          break;
      }
    }
  }
}
</script>
1 Like
2

So it looks like Vue v-model with Ionic 4 inputs is currently broken due to Stencil. The work around seems to be using binding and event handlers. I have not got any of the work arounds to work.
Does not work:

<ui-input v-model="mySelect" />

Works (Supposedly):

<ui-input :value="mySelect" @input="mySelect = $event.target.value" />

per: https://github.com/vuejs/vue/issues/7830

3

Try this as a workaround:

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