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

@mattabdi wrote:

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>

Posts: 1

Participants: 1

Read full topic