Ionic-framework: bug: Ion-modal not passing props data in ionic-vue

[stripathix]

Bug Report

Ionic version:
"@ionic/vue": "0.5.0",
"@ionic/vue-router": "0.5.0",
"vue": "^3.0.0-0",

Current behavior:
I am migrating from Vue 2 to Vue 3 with an upgrade of Ionic-vue. On opening modal, not able to pass propsData even using basic template provided in ionic docs https://ionicframework.com/docs/api/modal.

Expected behavior:
Should pass props data to the modal component.

Related code:
View component method to open modal

    async openWorkshopFilterModal() {
      const modal = await modalController
        .create({
          component: WorkshopFilter,
          cssClass: 'my-custom-class',
          componentProps: {
            data: {
              content: 'New Content',
            },
            propsData: {
              title: 'New title',
            },
          },
        })
      return modal.present();
    },

Filter modal: WorkshopFilter.vue

<template>
  <div>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      {{ content }}
    </ion-content>
  </div>
</template>

<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>

On the modal opening, title value is provided by the view using the below value is not used. It keeps using Super Modal as the title value.

 propsData: {
              title: 'New title',
            },

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected] @ionic/[email protected]

[stripathix]

No, still not working.
Using these versions

        "@ionic/vue": "^0.6.0-dev.202009281616.96596ba",
        "@ionic/vue-router": "^0.6.0-dev.202009281616.96596ba",

[liamdebeasi]

Can you please provide a GitHub repo I can use to reproduce this issue?

[stripathix]

Yeah sure. Here it is. https://github.com/stripathix/ionic-modal-issue

On tab 1 we have a button to open the modal. The title used in modal is not what we pass as props.

[liamdebeasi]

Sorry for the confusion, it looks like I gave you the wrong dev build.

This is the correct dev build:

npm i @ionic/[email protected] @ionic/[email protected]

The other issue is that there is a mismatch between the props defined on your component and the props being passed in. Your component expects a props object that looks like:

{
  title: 'New Title'
}

but you are passing the following in:

componentProps: {
  data: {
    content: 'New Content'
  },
  propsData: {
    title: 'New Title'
  }
}

Passing in the following should resolve the issue:

componentProps: {
  title: 'New Title'
}

[stripathix]

Thanks @liamdebeasi It works now with changes as you said.
But then looks like docs need changes for vue in here https://ionicframework.com/docs/api/modal.

In docs, it states that we need to pass propsData for props and data for data of the component.

[liamdebeasi]

Good catch! The docs are incorrect there. I will fix that.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22198, and a fix will be available in an upcoming release of Ionic Framework.

I made a PR for the docs changes here: https://github.com/ionic-team/ionic-framework/pull/22201

[stripathix]

Hey, @liamdebeasi from where can we know what is the next version released. I am not able to find anything related to new ionic/vue development in release notes and the npm version is also pretty old.

[liamdebeasi]

I released it last week. Release notes are here: https://github.com/ionic-team/ionic-framework/blob/ionic-vue/packages/vue/CHANGELOG.md

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.