Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No re-renders when observed state is used in some parts of the template #43

Open
EranNL opened this issue Jun 23, 2020 · 4 comments
Open

Comments

@EranNL
Copy link

EranNL commented Jun 23, 2020

Hello,

First of all, I am quite new to Vue, so I might have missed some documentation. I have used Mobx in combination with React, and haven't had any issues there regarding views not being updated.

Secondly, I have a quite complex construction, where I inject my stores via Inversify in order to have some sort of IoC-layer between my components and stores.
This works, however, correctly as far as I can see.

But, it works as long as I use the observable properties from my stores directly in my template. Using the @Observer-decorator, my views update and everything is fine.

However, I am using vee-validate for validating my forms. I have Vee-validate's observer around my form, in which a button exists. This button is listening to a loading state in my store, and should be updated whenever the loading state changes.

For example:
There is a login form, when clicking the button Vee-validate's observer checks whether all required inputs are filled.
When that is the case, the login method is called. This login method triggers a method in the store. At that point, the loading state is set to loading, which should update the button in the template.
The store method does some things with the API to check whether the user can be logged in, whereafter the loading state is set to "loaded".

And there it goes wrong. I can see in my template that the state goes back to loading. But it doesn't switch to "loading" in Vee-validate's observer. I have to change an input in order to trigger a re-render, before the button is switched back to the already switched store loading state.
This can be seen in this video: https://imgur.com/a/1NsNevz
The true/false is the same loading state indicator as is used in the button. As can be seen, the true/false at the bottom is updated when the action is done loading. The button however doesn't update until I type.
You can also see some error messages appearing at the top. These are also handles with stores and injected in components.

The code for the Vue component I am using:
https://gist.github.com/emachiels/81fd1b0e552bb536d499db75b3dd153f

And the code for the cocStore:
https://gist.github.com/emachiels/ae7ca3d6fcbea6e3c06644cef0368df6

Does someone know what the problem is?
Thanks in advance!

-- EDIT --
I am using the following versions:
Mobx: 5.15.4
Mobx-Vue: 2.0.10
Vue: 2.6.11
Vee-validate: 3.3.3

@damirbogd
Copy link

@emachiels having somewhat similar issue, have you been able to fix that?

@EranNL
Copy link
Author

EranNL commented Aug 22, 2020

@damirbogd, haven't been able to fix it so far. I work mostly with React, so haven't tried it either. But hopefully it works better with V3 of Vue.

@Sarps
Copy link

Sarps commented Jan 26, 2023

@damirbogd I'm having a similar issue. Were you able to work around this?

@EranNL
Copy link
Author

EranNL commented Jan 27, 2023

@Sarps It has been a while since I used the combination Vue and Mobx, so I am not sure if and how I fixed it. Are you using Vue 3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants