yariksav/vuedl

Reactivity on opened modal

cafedo opened this issue · 11 comments

cafedo commented

Hi,
I'm opening a Component trough the method manager.showAndWait and I've noticed that all the reactivity elements (watchers, binding with data, ..) are ignored and not executed. Is it because the component isn't attached under the Root Vue tag? Are there some workarounds?

yariksav commented

Please show me
1 your vue version
2 code of your component
3 do you use vuedl directly or through vuetify-dialog?

cafedo commented
  • Vue version: 2.5.21
  • I'm using vuedl taking some ideas of vuetify-dialog (in particular the DialogActions class)
  • I've extracted the code from my sourcebase, so some pieces are missing.

The issues are:

  1. If I load the data in the created Vue method and I set the data (that is in binding with the template), the UI won't be changed
  2. The validation watchers (ex: @watch('state.model.code')) are never rised: they are linked to data fields that are in binding with the UI. So also here, no sync between UI and Code.

Component.txt
PopupForm.txt

yariksav commented
  1. I've observed that vue 2.5.21 has some different logic with reactives. I didn't investigate this yet, because I work with vue 2.5.17 - where reactives work fine. Do you have opportunity to test your code in 2.5.17 version and tell me if it's work. TI will help me to find where is the problem
  2. You use @watch('state.model.idDivision'), it is complex object and i think you have to use
    @watch('state.model.idDivision', {deep: true }),
yariksav commented

I wrote reactive test, and reactivity seems to work correctly in both vue versions 2.5.21, 2.5.22.
Can you provide precise error message or warning

cafedo commented
  1. It's hard to come back to 2.5.17 because I have some dependent packages on 2.5.21; but I've read that you have successfully tested on 2.5.22, so ok.
  2. Also with @watch('state.model.idDivision', {deep: true }) the situation doesn't change; sorry, I forgot to mention it in the first post

Sadly I don't have any error message or warning; the binding is simply not working..

cafedo commented

By the way, is it a good approach append the dialog outside the Vue Root Tree? Is there a relation between my issue and this architectural choice? I had a look on other dialog libraries (https://terryz.github.io/vue/#/dialog/demo or https://github.com/yariksav/vuedl), they both try to set the dialog inside the Vue Root Tree and they can both render my component SFC without any binding problem.

yariksav commented

I will continue investigate this. Consider your question: it’s not matter where you put your vue component in DOM, it will work. App.vue is only application mounter, but you can put many App.vue.

yariksav commented

I've found reproduction of this bug and try to find solution. Vue team something changed between verison 2.5.17 and 2.5.18. It's hard to understand, because in 2.5.18: Commits 164 Files changed 178
🤕 And 2.5.17 works well

yariksav commented

Hi, @cafedo! I've found problem and solution, rewrited vuedl and vuetify-dialog modules.
Please test it by npm i vetify-dialog@next (ver 0.2.0-alpha.0)
Reason was using tag in layouts. It's turned over slot logic. until version 2.5.18 this hack have been worked...
Therefore layout must have a tag with ref="dialog-instance", example


The module will found it in $refs and will put here dialog instance

Please tell me if this will or not will work

yariksav commented

Hi, @cafedo! Did you try new version?

yariksav commented

fixed in v0.2.0