Skip to content

r-input does not honor r-var type Number #10

@lrq3000

Description

@lrq3000

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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions