Cannot make ion-segment change UI content

The docs are silent on how you actually make ion-segment change the content shown under the segment tab. I have tried setting a data property when the selection changes and using v-if to show the a div with an ion-list when the segment tab is selected, but it does not work. I am baffled and confused.

    <ion-content :fullscreen="true">
      <ion-segment @ionChange="segmentChanged($event)"  value="profile" >
        <ion-segment-button value="profile">
          <ion-label>Profile</ion-label>
        </ion-segment-button>
        <ion-segment-button value="backup">
          <ion-label>Backup</ion-label>
        </ion-segment-button>
        <ion-segment-button value="feedback">
          <ion-label>Feedback</ion-label>
        </ion-segment-button>
      </ion-segment>

 <ion-list lines="full" class="ion-no-margin" v-if="subview=='profile'">
STUFF   IN HERE SHOULD SHOW WHEN PROFILE IS SELECTED AND NOT OTHERWISE
</ion-list>

 data() {
     return {
       subview: 'profile',

    segmentChanged(sel) {
      this.subview=sel.details.value
      console.log(sel)

    }

Instead what happens is that the segment control seems to want to bounce back to its default. The behavior is really bewildering and I wonder what I am doing wrong.

4 posts - 2 participants

Read full topic