Vue-formulate: Array Option Syntax for select inputs?

[titusdecali]

I've reviewed all docs and found that there is an Array Option Syntax for checkboxes:
https://vueformulate.com/guide/inputs/types/box/#array-option-syntax

However, I would like to do something similar with a select input.

Rather than binding the data from a list of key:value pairs, I want to bind a key (called 'name') within an array of objects.

I'm sure this is a common use-case but I haven't found a way outside of using a typical html select box and then using v-for on <option> , which defeats the purpose of using the incredible vue-formulate library.

The point of this is that I have sub options which depend on the selected parent. I don't believe vue-formulate has support for cascading options such as this (would love to see this feature) but if you have a simple workaround that you use with VF, please let me know about that, too.

My data structure is:

 'coverOptions': [
        {
          'name': 'art',
          'optId': 'PF-CO-00001',
          'color': [
            {
              'optId': 'PF-CO-00001001',
              'name': 'doubleSided4',
              'price': 5
            },
            {
              'optId': 'PF-CO-00001002',
              'name': 'doubleSided8',
              'price': 10
            },
        {
          'name': 'snow',
          'optId': 'PF-CO-00002',
          'color': [
            {
              'optId': 'PF-CO-00002001',
              'name': 'doubleSided4',
              'price': 15
            },
            {
              'optId': 'PF-CO-00002002',
              'name': 'doubleSided8',
              'price': 20
            },
         }
]

And my input is:

          <FormulateInput
            name="coverColor"
            placeholder="Select a color option"
            type="select"
            :options="getOrderOptions.coverOptions.name"
          />

[justin-schroeder]

@titusdecali you can use the same array syntax for checkboxes for select lists as well. Each object needs a label and value property. The id is optional.

Your example would work just fine, except you would want to change some properties (maybe just use a computed prop or a getter) around to make them conform with the label and value requirement.

If you’re still unable to get to to work, I'd be happy to look at a code pen reproduction of the issue (check the community page on the docs for boilerplates).

[titusdecali]

@justin-schroeder You're the best, bro. Always there to help in a flash.
I got it working in CodeSandbox in case someone else wants a reference:
Code Sandbox:

Since this feature is available for other input types, I think people will more easily find and use it if it were located in a more generic section of the docs rather than just the checkboxes section.

Cheers!

[justin-schroeder]

Ok, this has been documented now. Thanks for pointing it out.