rtucek/vue-query-builder

Number Component with Operators - Error in props type

Closed this issue · 4 comments

tkakar commented

Hi - This is a great library for building queries.
I'm trying to use the Number component with operators following the example here (https://codesandbox.io/s/njrm3?file=/src/App.vue) but get the following error.
Vue warn]: Invalid prop: type check failed for prop "value". Expected Number with value NaN, got Object

I worked around it by using code from the Type Component, it works but then I cannot set the default value. Appreciate any suggestions.

rtucek commented

Hi @tkakar,

thank you, appretiate your feedback.

I'm clicking through your codesandbox sample, but I don't see any error in the browser. What OS and browser are you testing with?
I use Google Chrome Version 103.0.5060.53 (Official Build) (64-bit) on Linux Manjaro.

tkakar commented

Mine is MacOS Monterey and same Chrome Version as yours.

rtucek commented

ah... I checked the Input.vue instead of your mentioned Number.vue component.
I believe that was because your link above had imported the Number component, without actually making use of it and I happened to check just the first-best component in the rule definition...

The problem is within the Number.vue component itself, because this is contradicting:

  1. Refer to line 3 to 7: the prop's validation expects the model value to be a primitive integer.
  2. However, the component emits for the input event a value object that looks like { value: "...", operator: "..." } which fails the validation from 1).

The other rule components like Input.vue don't have an explicit type validation.

Sorry for my late reply.

tkakar commented

No problem. I figured that out. Thank you.