Add array support for storing values in form data

[Rednas83]

Add array support for storing lists/arrays

Something like this whereby the index is used for storing in the correct index

<div class="border border-black p-6">
      <FormulateInput
        v-for="(item, index) in items"
        :key="index + 1"
        type="text"
        :name="item"
        :index="index+1"
        :value="item"
        placeholder="Add item"
        class="mb-1"
        element-class="w-full"
      />
</div>

This wil now store data in the form like

item[1]='input1'
item[2]='input2'
item[3]='input3'

[justin-schroeder]

https://vueformulate.com/guide/inputs/types/group/

[Rednas83]

Group is only for an array of objects. I am actually looking for an array of strings or decimals. Something like ['input1', 'input2', 'input3'] [1, 2, 3] I think this could make a really nice addition for a more convenient way of storing simple lists.

…

On Fri, 26 Jun 2020 at 15:33, Justin Schroeder ***@***.***> wrote: https://vueformulate.com/guide/inputs/types/group/ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGANBHPIA65ZQLBQWRCWOV3RYSPS3ANCNFSM4OJKUV3Q> .

[justin-schroeder]

Ok gotchya.

If you're truly looking for simple array lists, it is supported: https://codepen.io/justin-schroeder/pen/abdyZzz

However some words of caution here, simple array lists have some faults in Vue. For one using an array index as a key on a list is not recommended. Reactivity caveats in Vue 2 also prevent easy array manipulation, so generally you have to replace the array which is a bit less performant, but it works. That's why the grouping mechanism in Vue Formulate uses objects that can have their own sub-attributes and Symbol keys.

Still, hopefully this helps!

[Rednas83]

...But this wil not work together with FormulateForm because that expects a name instead of the v-model.
My database expects this:

I can simply bind this to a FormulateForm like below:

Please consider official support for adding simple arrays. Array of objects are not always practical.

[justin-schroeder]

Can you propose an API? How would you like to write an array input?

[Rednas83]

My proposal is to add a new index property for storing in the correct array index name: 'array' index: 1 Or place it inside a group name: 'array' (group) |- index: 1 (input)

…

On Fri, 26 Jun 2020 at 17:35, Justin Schroeder ***@***.***> wrote: Can you propose an API? How would you like to write an array input? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGANBHOM5EV7RKKIXK23VILRYS52XANCNFSM4OJKUV3Q> .

[justin-schroeder]

@Rednas83 thanks for following up. What I'm asking is can you write some sample code of what you want the API to look like. For example:

<FormulateInput
  v-for="(item, index) in items"
  :index="index"
  type="text"
  name="group"
/>

Is that what you want it to look like? If so there are several questions – how do we get a stable key? Using the index as a key will lead to reactivity issues, so we need each node to have its own key. How do users add new inputs or remove inputs. How does Vue Formulate know to store values as an array (maybe if there is an index prop it just does that somehow?). Would the requirement be that all inputs have to have the same input name?

What are some real-world use cases where this is a valuable tool and groups doesn't work well? My gut reaction is to say this problem is solved with a group and a simple map on your submit handler, so Im trying to figure out if its worth implementing or not and asking your help to arrive at either conclusion.

[Rednas83]

Besides the missing key this looks fine to me. I would make the key like "item[index]" to make it perfectly clear where it comes from.

<FormulateInput
  v-for="(item, index) in items"
  :key="`items[${index}]`"
  :index="index"
  type="text"
  name="group"
/>

To simplify it even more perhaps like this, whereby names is the array of strings
<FormulateInput type="text" names="items"/>
or <FormulateInput type="text" array="items"/>
or <FormulateInput type="text" name="items"/> <!-- Normal operation on string and Loop on array -->

Or place inside a group to make it a bit more readable and more flexible

<FormulateInput type="array" name="items"/>
  <FormulateInput type="text" index="1"/>
<FormulateInput />

My preferred option would be <FormulateInput type="text" names="items"/> because it's the shortest and would be most fitting I think for just a simple array.

User case for example is a simple todo list

[justin-schroeder]

Ok, I hear what you're saying. There are some really challenging implementation details that would need to be ironed out, but I can see how this could be a compelling feature. I'll mark it as open to suggestions, and maybe we'll target implementing something like this roughly the 2.6 release cycle

[chadwtaylor]

+1 Have a need for this. :)

[justin-schroeder]

@chadwtaylor can you give your use case? Im still not convinced this is a feature that should be in core when we already have repeatable fields so im trying to feel it out a bit more and see what the real world applications are.

[justin-schroeder]

There doesnt seem to be sufficient demand for this feature and frankly I find it a bit confusing. I'm going to close it for now, but if it becomes pressing in the future, let's feel free to resurrect it.

[itsgifnotjiff]

Would love to have it as I wish to download the data as JSON and instead of converting it o submit I would love to have a group that models to an array of strings instead of an array of objects containing random key and string value.