vue-formulate
vue-formulate copied to clipboard
Schema Group directly mutates state
Describe the bug
All regular schema fields use v-model to change values with the @input
event.
But when a group is used, the group directly mutates the state, ommiting v-model.
To Reproduce
In reproduction link:
-
Enter something in field: NON GROUP INPUT You will see a Setter was Called message. The data has been correctly mutated through v-model
-
Enter something in field: GROUP INPUT You will NOT see the message. The data has been directly mutated.
Reproduction https://codepen.io/timar/pen/JjbQJXe
Expected behavior Groups should also trigger @input event and change the state through v-model. This is important for catching all changes to the data through v-model, also directly mutating state in vuex is prohibited, and overall problematic.
Note - here's the same codepen with Vue 2.4.5 instead of 2.5.2, and in that example, the setter is called for both inputs in groups and inputs not in groups: https://codepen.io/codekiln/pen/jOBOgxX
I think for current projects, we can use NATIVE(input) by adding this in mounted()
. With NATIVE binding groups also trigger but not when item is removed then we can use repeatableRemoved
event.
mounted() {
// Add input listener.
// With NATIVE binding, there is no trigger when element removed from repeatable;
this.$refs["formName"].$el.addEventListener("input", this.submitOnChange, true);
// add repeatableRemoved event listener, run submitOnChange when element removed
this.$refs["formName"].$children.forEach((item) => {
if (item.$options.propsData.repeatable) {
item.$on('repeatableRemoved', this.submitOnChange);
}
})
},