Array as options for select input

[leokyohan]

Is there an option to give an array as the input for the select input?

For example, something like this

FormulateInput v-model="value" :options="{Name 1, Name 2, Name 3, Name 4}" type="select" placeholder="Select a Name from the list"

Basically the usecase is, I have a list of names fetched from database which is in an array format and user has to select a name from only that list. How can I use vueformulate in this case?

[malydok]

I agree that an options array is a very common use-case.

The interim solution for you is to convert the options beforehand, like so:

const options = Object.fromEntries(optionList.map(option => [option, option]);

which will result in an object that formulate expects.

[justin-schroeder]

You can use an array, but it must be an array of objects with a label and value property:

[
  { label: "Name A", value: "name_a" },
  { label: "Name B", value: "name_b" }
]

So you could also produce this format from a simple array very easily:

list.map(value => ({ label: value, value }))

Unsure if arrays of primitives are something we want to support or not. I'm all for making it easier to use, but I also don't want to add too much syntactic sugar.

In general what kind of use cases are you all running into where you a value would be the same as the label? Is that a common pattern? Usually I see something like unique id & visual label.

[leokyohan]

yes. In my case the problem is I have a list of names. And all these names I fetch from database has a comma, a space or a dot etc as names have first name, second name, middle name etc. And I want the name to go into the database also in the same format. But in vue formulate the value can't have spaces or these special characters. Only the label is supporting it, which is just visually shown to the user.

So if I do this, in the format mentioned above, I wont be able to do it as below even If I have to. [ { label: "Name A", value: "Name A" }, { label: "Name B", value: "Name B" } ]

I'll need to add an underscore or anything unnecessarily in the value and also will have to do some backend coding to store it back in the same format as it is in the database. In my case I have different lists of company names, people names etc going into my select options in a very big input form. So it's very tedious to process each form input to the value format and then do it back to the database format.

I think this is a very common use-case as we normally have to list down a set of names or anything like that. If there is a work around for this problem with vue-formulate, that also would be very useful for me.

So I would love to see an option, in select, to just fetch the data as it is from an array and take as a v-model input. This would be useful when I show the existing values from database in an update form also.

[justin-schroeder]

Hmm, @leokyohan I'm all for making things easy to use, but I'm not sure I understand what the struggle is here.Why do you need to add an underscore and covert it on the backend? There's no need to do that at all.

Here's a demo of how you can do this right now:

https://codepen.io/justin-schroeder/pen/JjGmOeK

Again, not saying adding support for an array of strings is out of the question, just confused why a 1 liner isn't sufficient. Let me know your thoughts.

[justin-schroeder]

But in vue formulate the value can't have spaces or these special characters.

@leokyohan also this is not correct. If you found this to be true please open a bug report.

[leokyohan]

Sorry. I was wrong. I tried out the options mentioned above and it is working fine. Thanks a lot for supporting. I think these examples will help others also with similar use cases. I'm closing this feature request as the above mentioned options are a really good work around for my request.

[katerlouis]

Again, not saying adding support for an array of strings is out of the question...

I just tried to pass an array, got an empty dropdown, and started looking for answers. :D While the .map in your pen works, it is not that easy to come up with yourself, depending on the developers skill level.

In my opinion it would improve DX immensely to accept this out of the box: :options="['New York', 'Sydney', 'Berlin']"

What's the status on this?

[justin-schroeder]

To answer your first question, why doesn't the library already do this: because the library already has 2 mechanisms to create option lists — they are documented, and the only documented mechanism to do that. So I guess my expectation is developers, even new ones, will follow the documentation. However in an effort to make it easier we could potentially add a third mechanism. These things are tricky though because it is never a singularly wrong decision to add or not add support for another way of doing things but the cumulative total over time can be too many ways to do the same thing, you get technical debt, and the documentation gets confusing for people who spend the time to learn it.

As for the status: Because this library is trying to be "the easiest way to build forms", and it is a simple map function, we can probably add this, but currently its not in development. Feel free to create a new feature request issue and I'll tag it for 2.5 or 3.0.

[katerlouis]

That's interesting and makes sense :) Didn't think about that.

Still hope this is gonna be implemented in the future :)

PS: Didn't want to offend you :'(

[justin-schroeder]

No offense at all :) Just wanted to clarify the decisions made. I think we can make this happen though.

[mattkaye]

@justin-schroeder but the documentation says you can pass an array of strings. Is this a mistake?

[justin-schroeder]

Not a mistake, this feature was added.

[mattkaye]

Ahh I see you added it in 2.5.0. I'm on 2.4.5 which would explain it. Thanks, awesome library!

[hamzabawumia]

I just want to add this, as it is NOT in your documentation.Although it works.
Also, I wish you would add input type="autocomplete" as it is a commonly used thing. Thanks

<FormulateInput
        type="select"
        name="country"
        placeholder="Select A Country"
        :options="countries.map(countries => ({label: countries.country_name, value: countries.id}))"
    />

countries= [
        {
          id: 31,
          country_name: 'Cambodia'
        },
        {
          id: 32,
          country_name: 'Cameroon'
        },
  ]