Skip to content

Can't use v-model on a custom property while using nativescript-vue-template-compiler #371

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.

Sign up for GitHub

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

Jump to bottom
Closed
farfromrefug opened this issue Nov 7, 2018 · 11 comments
Closed

Can't use v-model on a custom property while using nativescript-vue-template-compiler #371

farfromrefug opened this issue Nov 7, 2018 · 11 comments
Labels
priority:normal V2 Issues related to V2

Comments

@farfromrefug
Copy link
Contributor

Version

2.0.2

Reproduction link

cant be reproduced with playground

Platform and OS info

Android 7.0 / NativeScript 5.0 / Macos

Steps to reproduce

I am writing a custom native component which inherits TextField
My model won't work because nativescript-vue-template-compiler does not know my custom component (isKnownView) and thus won't handle it the right way.

In my compile template i end up with this:

 _c("MDCTextField", {
                    ref: "confirmPassword",
                    staticClass: "input",
                    attrs: {
                      hint: "Confirmer le mot de passe",
                      secure: "true",
                      returnKeyType: "done",
                      error: _vm.passwordError
                    },
                    on: { textChange: _vm.onInputChange },
                    model: {
                      value: _vm.user.confirmPassword,
                      callback: function($$v) {
                        _vm.$set(_vm.user, "confirmPassword", $$v)
                      },
                      expression: "user.confirmPassword"
                    }
                  })

If i use TextField instead the "model" data field is not there and thus handled at runtime
Here the callback is wrong because it should be $$v.value instead of $$val

It is a big deal for anyone implementing custom native components like i do.
One solution would be to test for isKnownView at runtime

If there is a workaround please can you tell us.

What is expected?

v-model working

What is actually happening?

v-model not working
@farfromrefug
Copy link
Contributor Author

I managed to get this to work by registerElement within my webpack config.
However it requires a change to nativescript-vue-template-compiler, registerElement needs to be exported so that we can use it.

@farfromrefug farfromrefug mentioned this issue Jan 21, 2019
Merged
@msaelices
Copy link

@farfromrefug what do you mean by adding registerElement within the webpack config?

BTW, may this commit help on this? khawarizmus@625f456

@farfromrefug
Copy link
Contributor Author

farfromrefug commented Jan 23, 2019 •
edited
Loading

@msaelices look at what I do here I use the registerElement from nativescript-vue. This is essential with vue files because XML is transformed into JSon which must already contains the model property. you can look at the computed json for NS text field to see what I am talking about.
also looking at nativescript-vue you ll see that the registerElement is done within webpack script on the require call

@msaelices
Copy link

@farfromrefug got it. Actually, if you look at the nativescript-vue-template-compiler code which compiles the v-model directive (see https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/compiler/directives/model.js), I don't know the reason to call the Vue legacy genComponentModel, as all the Vue components used within a template should be registered with Vue.registerElement, so they all should be "known".

If we use getDefaultModel in all cases, it should work in all scenarios, right? Probably @rigor789 has more expertise in it.

@msaelices
Copy link

msaelices commented Jan 23, 2019 •
edited
Loading

@rigor789 forget it. You need getComponentModel for the custom Vue components which wraps some logic on them.

@msaelices
Copy link

msaelices commented Jan 24, 2019 •
edited
Loading

@farfromrefug So, the problem is that at compile time we are checking that if the component has been registered in order to output the regular v-model directive or a NS-vue custom one, which we do not know until the app is running. So only the previously registered built-in components are working with compiled templates and v-model.

@rigor789 what do you think is the best approach to solve it? I could work in the direction you wanted.

BTW, I think with Vue 3.0 this would be probably solved by design.

CC/ @yyx990803

msaelices added a commit that referenced this issue Jan 28, 2019
@msaelices
fix(v-model): export registerElement in webpack. fix v-model issue #371
e1bc562
@msaelices
Copy link

@farfromrefug to let people use your hack, I've exported registerElement here: e1bc562

Waiting for a better fix by @rigor789

@farfromrefug
Copy link
Contributor Author

@msaelices awesome! thanks a lot. And yes a better fix is needed. I actually do the same exact thing in web pack and in my runtime. Which should not be necessary

@tgpetrov
Copy link

I have the exact same problem, attempting to register an element with model, but not able to use two-way binding with this element.

@rigor789
Copy link
Member

In 2.0 we made everything a functional vue component, this unfortunately introduced an issue with v-model. I don't remember the exact issue, but will track it down and hopefully release a fix soon!

@abbieben07
Copy link

@rigor789 looks like even with registerElement this problem still persists, cause i tried using Material Textfield and my Custom Textfield, i can't seem to get two way binding with the value of textChange instead i am getting the Nativescript Event Object. please if there is a walkaround for i will be grateful cause my validator depends on the v-model directive. Thank you

@rigor789 rigor789 added the V2 Issues related to V2 label Dec 5, 2022
@rigor789 rigor789 closed this as not planned Won't fix, can't repro, duplicate, stale Mar 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
priority:normal V2 Issues related to V2
Milestone
No milestone
Development

No branches or pull requests
6 participants
@msaelices @farfromrefug @rigor789 @tgpetrov @nativescript-vue-bot @abbieben07