Add props to component in setup() method / ionic & vue

Issue

I’m trying to pass props to a component in <ion-nav>.
For this <ion-nav> I followed this tutorial:
https://aaronksaunders.hashnode.dev/how-to-navigate-in-ionic-modals-with-ion-nav-in-vuejs

My code currently looks like this:

<template>
  <div>
    <ion-nav :root="orderUpdate" id="modal-nav"></ion-nav>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { IonNav } from "@ionic/vue";
import OrderUpdate from "@/components/OrderUpdate";

export default defineComponent({
  name: "OrderUpdateModal",
  components: {
    IonNav
  },
  setup(){

      const orderUpdate = OrderUpdate
      return {
          orderUpdate
      }
  },
  created() {
      console.log(this.positions);
  },
  props: {
    order: [],
    positions: [],
    materials: [],
  },
});
</script>

As you can see I use the component OrderUpdate in the setup() function.
Sadly I’ve got no idea how I can pass my props to this component. I’ve tried the following but this obviously doesn’t work:

<ion-nav :positions="positions" :materials="materials" :order="order" :root="orderUpdate" id="modal-nav"></ion-nav>

Does someone have an Idea how I can achieve this?

Solution

You can pass options to the component using the rootParams property in the template:

<template>
  <ion-nav :root="OrderUpdate" :rootParams="rootParams" />
</template>

<script>
import OrderUpdate from '@/components/OrderUpdate.vue'

export default {
  setup() {
    return {
      OrderUpdate,
      rootParams: {
        positions: 'my positions',
        materials: 'my materials',
        order: 'my order',
      }
    }
  }
}
</script>

Alternatively, you can do this programmatically:

<template>
  <ion-nav ref="ionNav" />
</template>

<script>
import { ref, onMounted } from 'vue'
import OrderUpdate from '@/components/OrderUpdate.vue'

export default {
  setup() {
    const ionNav = ref(null)

    const pushOrderUpdate = () => {
      ionNav.value.push(OrderUpdate, {
        positions: 'my positions',
        materials: 'my materials',
        order: 'my order',
      })
    }

    onMounted(() => pushOrderUpdate())

    return {
      ionNav,
    }
  }
}
</script>

Answered By – tony19

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0