Little Vue component for turning JSON into native HTML for inputs

HiddenInput.vue

<script>
import _ from 'lodash'

export default {
    props: [ 'name', 'value' ],

    methods: {
        flatInputsFromDeepJson(item, key, h) {
            if (typeof item === 'object') {
                return _.flatMapDeep(item, (value, newKey) => {
                    return this.flatInputsFromDeepJson(value, key.concat(newKey), h)
                })
            }

            return h('input', { attrs: {
                class: 'hidden',
                type: 'text',
                name: this.name + this.wrapInBrackets(key),
                value: item,
            }})
        },

        wrapInBrackets(keys) {
            return keys.length
                ? '[' + Array.from(keys).join('][') + ']'
                : ''
        }
    },

    render(h) {
        return h('div', [
            this.flatInputsFromDeepJson(this.value, [], h)
        ])
    },
}
</script>