How allow for dynamic :options property in v-for where i 'render' dynamic formkit fields

[fdverwoerd]

So I have this loop, and now I was trying to add 'select' as possible type. But select needs :options but text doesnt. How is the best way to go about:

<FormKit v-if="config.extraRequestFields.length > 0"
                         name="extraRequestFields"
                         type="group"
                >
                  <FormKit v-for="(freeField, index) in config.extraRequestFields"
                           :key="freeField.label"
                           :id="freeField.label"
                           :name="freeField.label"
                           :label="freeField.label"
                           :type="freeField.type"
                           :help="freeField.help"
                           v-bind="getFreeFieldOptions(freeField)"
                           validation="length:0,200"
                  ></FormKit>
                </FormKit>

my getfree looks like this:

/**
 * getOption
 */
function getFreeFieldOptions(freeField: LisyFreeField) {
  console.log('is this method called?', freeField.type);
  if (freeField.type === 'select') {
    return { options: freeField.options }
  }
  return {};
}

I tried v-bind and :options but I get Squiqly linees on Formkit because of type:

Even though the code works, I want to know how to make this safe (type safe or not get squiqly lines).

[fenilli]

One way would be to have an if statment for different kinds, for its not only select that has options, so you could have v-if="hasOptions(freeField.type)" and have somewhat different implementations there.

Other way would be to construct the bind for everything, so the bind would also return the type inside of it, so ts can deduce on the object you return that its a specific type with specific fields.

function bindFreeFields(field) {
  return field;
}

<FormKit
  v-for="freeField in config.extraRequestFields"
  v-bind="bindFreeFields(freeField)"
/>