chenquincy/vue-dynamic-form-component

how to make multi select with object value ?

paolog22 opened this issue · 4 comments

hi @chenquincy
how to make multi select with object value ?
i am having this error

image

here is my code

equipments: {
        type: 'object',
        label: 'Equipments',
        fields: {
            equipment: {
                type: 'enum',
                required: false,
                multiple: true,
                enum: equipments,
                options: equipments.map((i, index) => {
                    return {
                        label: i.text,
                        value: i,
                        key: index
                    }
                })
            }
        }
    }

the equipments is an array of object like [ { text: 'option 1' } ]

and i want to make the equipment key as an array of object as a value

@paolog22 Have you saw this part of docs? It will teach you how to use mutli-select. Note that Object isn't enumerable, so you can map data to String with JSON.stringify in form, don't forget to JSON.parse the data before submit. Here is the demo:

let equipments = [
  { text: 'option-1' },
  { text: 'option-2' },
  { text: 'option-3' }
]
equipments = equipments.map(i => JSON.stringify(i))

const descriptors = {
  equipments: {
    type: 'object',
    label: 'Equipments',
    fields: {
      equipment: {
        type: 'array',
        required: false,
        defaultField: {
          type: 'enum',
          multiple: true,
          enum: equipments,
          options: equipments.map((i, index) => {
            return {
              label: JSON.parse(i).text,
              value: i,
              key: index
            }
          })
        }
      }
    }
  }
}

@chenquincy i did saw that part of docs. but that stringify thing i got confused. thanks

@paolog22 Object value is not enumerable, so it's not a good choice to use object values in multi-select. Use stringify change object to string can make the values enumerable. Another way is use options like ['option-1', 'option-2'] in form and convert them to object before submit.
Any confusion else?

@chenquincy thanks you will close this now.