Ionic/Vue issue when putting Vue in modal

Ionic Framework ionic-v3
1

i have a ionic/vue project which has a login screen. when i use the screen like normal <Login/> it works fine, but when i put it in a modal i’m getting an error TypeError: Cannot read property 'dispatch' of undefined . i assume it’s because this maybe resolves to the screen that opened the Login vue instead of using what’s in the Vue page. anybody ever experienced this before?

Update:
When I lookup the line in question: var dispatch = this.$store.dispatch; it has a reference to this being the Login vue, but it cannot access $store. Will keep trying to figure out why this is!

2

code?? it is really helpful…

3

i am guessing… but your modal component should emit an event when the button is clicked and have the parent dispatch the event to the store to try and login

4

I’ll try out the emit thing.

In the meantime, it’s actually code you wrote from the ion-meetup-vue2 project we’ve been chatting about. So in MY code, what I did was put your Login.vue into a modal. So you simply click on the “Login” button on App.vue and it calls Login.vue in a modal. That works fine. It’s when you go to login that the problems starts. Mind you, if I call <Login/> outside of a modal, the login works fine.

When I try to login it calls async doLogin() and that calls vuex.esm.js and dies on this line:
var dispatch = this.$store.dispatch;

Here is a video which might help:
https://youtu.be/wpjFG3M8NpI

5
6

I put parent: this on the parent but the modal isn’t picking up this.$parent. So I’m having trouble emitting back to the parent:

TypeError: Cannot read property '$emit' of undefined

Will keep looking into it…

7

I got you… https://dev.to/aaronksaunders/ionic-modal-in-vue-js-managing-events-29c

8

I went from this:

				.create({
					component: Login,
						parent: this
				})
				.then(m => m.present());

to

				.create({
					component: Login,
					componentProps: {
						parent: this
					}
				})
				.then(m => m.present());

Things appear to be working now. Sorry I’m slow with the Vue + Ionic pickup! lol