-
Notifications
You must be signed in to change notification settings - Fork 3
Description
When using a r-input
component, which is very useful to allow the user to input arbitrarily precise values or strings, it always return a string, whether the r-var
it was binded to is set as type Number
or not.
Here is an example:
<script src="https://unpkg.com/@iooxa/article"></script>
<link rel="stylesheet" href="https://unpkg.com/@iooxa/article/dist/iooxa.css">
<r-var name="a" value="1" type="Number"></r-var>
<r-var name="b" value="10" type="Number"></r-var>
<r-var name="c" value="100" type="Number"></r-var>
<r-var name="d" value="1000" type="Number"></r-var>
<r-var name="sum" value="0" type="Number"></r-var>
<r-input bind="a"></r-input>
<r-input bind="b"></r-input>
<r-input bind="c"></r-input>
<r-input bind="d"></r-input>
Sum: <r-display :value="(a+b+c+d)"></r-display>
At first page load, the result shown is Sum: 1111.0
, which is correct, because the variables were initialized as numbers. But as soon as any value is changed in any input, the result becomes a string, and hence the sum becomes a concatenation of strings eg: Sum: 1101001000
.
Current workarounds include either parsing as float inside the r-display
:
Sum: <r-display :value="(parseFloat(a)+parseFloat(b)+parseFloat(c)+parseFloat(d))"></r-display>
Or by parsing as float when the r-input
components change the r-var
values:
<r-input :value="a" :change="{a: parseFloat(value)}"></r-input>
<r-input :value="b" :change="{b: parseFloat(value)}"></r-input>
<r-input :value="c" :change="{c: parseFloat(value)}"></r-input>
<r-input :value="d" :change="{d: parseFloat(value)}"></r-input>
A simpler approach would be for r-input
to check the r-var
type and store as a float if set as a Number
.
BTW I did this small test to see how far the reactivity goes and I'm quite impressed that the sum is automatically updated without explicitly binding a callback or a specific variable, IMHO this is amazing and allows for very highly expressive but concise setup of variables and components interactions. An example like the one I produced above could be added in the documentation to show that modifying any variable will automatically update :value
aggregates (and not just bindings).