Cannot make ion-segment change UI content

Ionic Framework Ionic Vue
1

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.

2

You need to pass in the value of subview to value otherwise the value will get set back to profile whenever it re-renders:

<ion-segment @ionChange="segmentChanged($event)" :value="$data.subview">
1 Like
3

Awesome thank you. Did I miss that in the docs somewhere?

4

Our docs are a bit confusing regarding this, so we should probably add some better examples. I don’t think this particular usage is noted in the docs – just static value usage.

1 Like
5

The pattern makes sense now. It would be great to have an example of changing a content panel, but I get now that this isn’t doing anything weird.