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

Q-Input and v-model.trim and clearable does not work on Q2 #10376

Closed
zanzara opened this issue Aug 13, 2021 Discussed in #10362 · 4 comments
Closed

Q-Input and v-model.trim and clearable does not work on Q2 #10376

zanzara opened this issue Aug 13, 2021 Discussed in #10362 · 4 comments

Comments

@zanzara
Copy link
Contributor

zanzara commented Aug 13, 2021

Discussed in #10362

Originally posted by zanzara August 12, 2021
IMO it seems to be a bug:
If i use this:

     <q-input
         v-model.trim="v$.bildUrl.$model" 
        :error="v$.bildUrl.$error"
        :error-message="getPicErrMsg(v$.bildUrl)"
         dense
         lazy-rules
         clearable
         autofocus
         :hint="$t('gwsCol.Bild.hint')"
   />

it throws me this error when I click on clearable:
Bildschirmfoto zu 2021-08-12 15-18-12

If I use v-model w/o .trim it works.
Can anyone confirm? Or where is my mistake? (it works in Q1)

(Info: » Pkg quasar........ v2.0.3 » Pkg @quasar/app... v3.0.4 )

@ontwikkelfabriek
Copy link

I can confirm, pressing clear input on the first input with the trim modifier will throw a null pointer exception. The second input without trim is fine.

Here's a codepen:
https://codepen.io/ontwikkelfabriek/pen/MWmRwjr

@rstoenescu
Copy link
Member

This should be "enhanced" in Vue itself.

Please use a slot and add yourself a QBtn/QIcon with a click handler to reset the model to an empty string instead of null. No way around it unless 1) Vue handles null value and 2) we introduce a breaking change and reset model to empty string (which is definitely a no-go).

@zanzara
Copy link
Contributor Author

zanzara commented Nov 6, 2021

So last remark 'cause it had worked before in Qv1:
Is this a bug in Vue3? Or how do I should interpret "enhancement" here?
@rstoenescu To be honest, I did not understood your explication. I think it got something to do with .trim
Because w/o this modifier it works pressing the clearable prop?!

MilosPaunovic added a commit to MilosPaunovic/quasar that referenced this issue Feb 10, 2022
rstoenescu added a commit that referenced this issue Feb 10, 2022
…0362 #12431 (#12432)

* fix(docs): Improved QInput example...

...to prevent issue duplicating

Related: [#11423, [#10376, [#10362 [#12431.

* Update input.md

Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>
@CamilleDrapier
Copy link

This might be fixed in vue in the following PR related to this issues: vuejs/core#5765

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

4 participants