Skip to content

Instantly share code, notes, and snippets.

@zaichaopan

zaichaopan/InputHidden.vue

Forked from calebporzio/InputHidden.vue
Created November 19, 2018 06:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zaichaopan/e354662ba1f66d1c6e3ec9d41c8925e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zaichaopan/e354662ba1f66d1c6e3ec9d41c8925e6 to your computer and use it in GitHub Desktop.
Download ZIP
A Vue component for turning json into hidden input elements
Raw
InputHidden.vue
// Usage:
// <input-hidden name="users" :value="[{name: 'Caleb'}, {name: 'Daniel'}]"/>
// (value can be a: string, integer, array, object)
//
// will render:
// <input class="hidden" type="text" name="users[0][name]" value="Caleb">
// <input class="hidden" type="text" name="users[1][name]" value="Daniel">
<script>
import _ from 'lodash'
export default {
functional: true,
props: [ 'name', 'value' ],
render(h, context) {
function wrapInBrackets(keys) {
return keys.length
? '[' + Array.from(keys).join('][') + ']'
: ''
}
function flatInputsFromDeepJson(item, key, h) {
if (typeof item === 'object') {
return _.flatMapDeep(item, (value, newKey) => {
return flatInputsFromDeepJson(value, key.concat(newKey), h)
})
}
return h('input', { attrs: {
class: 'hidden',
type: 'text',
name: context.props.name + wrapInBrackets(key),
value: item,
}})
}
return flatInputsFromDeepJson(context.props.value, [], h)
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment