Dealing With Many Attributes Mapping To A Parent Component List In Vuejs

I've got a list of components where I'd like them all to be editable / replicate state to the parent component. The list component exists as: Vue.component('shortcuts', { props:

Solution 1:

You can use sync modifier with the props object notation together. Instead of v-bind="shortcut" use v-bind.sync="shortcut"

This way shortcut component can declare all props (instead of just options object) and still be able to notify parent about mutation

But you need to change how you bind your inputs. Instead of <input ... v-model="action"> you need to <input ... v-bind:value="action" v-on:input="$emit('update:action', $event.target.value)">. Problem with this is that different <input> types use different names for value and change event

To work around it and keep using v-model you can declare computed for each prop and use v-model="actionComputed"

computed: {
  actionComputed: {
    get: function() { returnthis.action },
    set: function(value) { this.$emit('update:action', value) }
  }
}

So the result is again lot of boilerplate...

TL:DR

If you want all props declared ahead of time (instead of single prop of type object), some boilerplate is necessary. It can be reduced by generating computed props for v-model on the fly (same way Vuex helpers generate computed to access and update Vuex state) but I don't think it is worth the effort. Just pass an object and let the <input> components mutate it's properties...