Vue-formulate: Form Binding to a nested data object

[bryanbuchs]

Using v-model on FormulateForm makes it easy to bind the inputs to a data object, but is there syntax or support for using nested keys?

In this example, I've got data in a Vuex store that's not a flat map of keys/values. Only some of the keys are used in any given component.

formValues: {
  settings: {
    n: {
      min: 0,
      max: 1500,
      initial: 100
    },
 ...
}

If I want to bind a FormulateInput to formValues.settings.n.initial, how would I go about that?

[justin-schroeder]

If you're using Vuex, I would recommend creating a getter that produces a key/value pairs. If you want the other properties (like min/max) to be used, then consider using something like a v-for in conjunction with a v-bind as shown on the generation page:

https://vueformulate.com/guide/forms/#generating-forms

Does that help?

[bryanbuchs]

Thanks. I ended up using @maoberlehner's vuex-map-fields, which gave me getters from deep store objects to single data keys in my component. I'm not able to use v-model on FormulateForm, but binding to FormulateInput works, too.

[engram-design]

Just ran into this similar situation myself, trying to use v-model with the form schema.

In an ideal scenario, it'd be great to be able to take something like:

formValues: [{
    label: "First Name",
    required: true,
    settings: {
        placeholder: "Enter your first name",
        icon: "some-icon.svg",
        ...
    }
    ...
}]

<FormulateForm v-model="formValues">
    <FormulateInput name="label" />
    <FormulateInput name="required" />
    <FormulateInput name="settings[placeholder]" />
    <FormulateInput name="settings[icon]" />

I've done similar things in the past, without Formulate by using Lodash's get, which supports fetching values in either dot-notation, or array syntax as above.

_.get(formValues, 'settings[placeholder]') = Some text.

Not sure if thats applicable in your scenario - I'm sure its a bit more more complicated!

[justin-schroeder]

@engram-design im a bit confused by that code example, not sure why the name of the field would be “Some text”? Either way, but you might be looking for support for nested objects which this issue wasn’t really about (more about vuex). There’s an active issue for this you might want to track #145

[engram-design]

@justin-schroeder Sorry for the confusion - I've just updated the example if that helps. And you're probably right - sorry about that! I'm using Vuex, so I thought it might've been somewhat related.

As an alternative, I'm pretty sure I can make use of the group functionality as per the docs

[HMilbradt]

I know this is a closed issue, but I came across this when I was looking for a way to solve this, and ended up writing a simple recursive function for it:

https://gist.github.com/HMilbradt/454d211f9958392e2a62a32cd1f1b66d

Thought I'd share here in case anybody in the future comes across this