How to pass a prop to a page [Ionic + Vue 3]

I’m using Ionic + Vue3, and I’m trying to pass a prop from the root app to the page components, with data binding, but it looks like the components will not receive the prop.

This is my root app:

<template>
  <ion-app>
    <!--  Just trying to send data to a child component just like with a regular component -->
    <ion-router-outlet :items="items" />
  </ion-app>
</template>

<script>
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  },
  data() {
    return {
      items: [
        {
          name: 'Foo',
        },
        {
          name: 'Bar'
        },
      ]
    }
  }
});
</script>

And one of my components:

<template>
    <ion-page>
        <ion-content>
            <ion-list v-for="item in items" :key="item">
              <ion-item>
                <ion-label>{{ item.name }}</ion-label>
              </ion-item>
            </ion-list>
        </ion-content>
    </ion-page>
</template>
<script>
import { IonContent, IonPage, IonList, IonItem, IonLabel } from '@ionic/vue';

export default {
  name: 'Home',
  components: {
    IonContent,
    IonPage,
    IonList,
    IonItem,
    IonLabel,
  },
  props: [
    'items'
  ],
  },
  mounted() {
    console.log(this.items); // outputs: undefined
  }
};
</script>

The ionic list is not rendered, since, as I’ve checked by using the mounted() hook, the items prop is undefined. No value received. I’m aware that <ion-router-outlet> is a special Ionic component, not a pure Vue one, but I read in the docs that it behaves in the same way as <router-link>, and <router-link> supports passing props with data binding. Seems that it’s not the case for <ion-router-link>.

How can I work around this?

1 post - 1 participant

Read full topic