vue-formulate icon indicating copy to clipboard operation
vue-formulate copied to clipboard

Schema Group directly mutates state

Open sugoidesune opened this issue 3 years ago • 2 comments

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:

  1. Enter something in field: NON GROUP INPUT You will see a Setter was Called message. The data has been correctly mutated through v-model

  2. 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.

sugoidesune avatar Mar 18 '21 20:03 sugoidesune

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

codekiln avatar May 06 '21 19:05 codekiln

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);
        }
    })
},

nikolaysm avatar Jun 20 '21 22:06 nikolaysm