Vue-form-generator: Adding custom fields

[reardestani]

Hi,

Is it possible to add new custom fields without using webpack, vue-loader, as far as I see I need to do it in a separate file then load it in main app but I am just loading vue and this package via script in my simple app.

For example, how is it possible to do it in the official example?

Thanks in advance,

[icebob]

This is an example for custom field: https://jsfiddle.net/0mg1v81e/251/

You need to register your field as a global component:

Vue.component("field-myinput", {
    template: '<input type="text" v-model="value" style="width: 100%; border: 2px solid red" />',
    mixins: [ VueFormGenerator.abstractField ]
});

And in the schema use the field name without field- prefix:

{
    type: "myinput",
    label: "My input field",
    model: "msg"
}

[reardestani]

Thanks man, it works for me.

[reardestani]

Wondering why the model value is not getting updated in the simple color picker? When I change the value directly from input it works but not when picking a color from color picker.

Example: https://jsfiddle.net/reardestani/0mg1v81e/254/

Screenshot: http://take.ms/yJIyT

Thanks in advance,

[icebob]

It seems bootstrap-colorpicker doesn't trigger the input event on the <input />. So you need to do it manually via picker changeColor event.

https://jsfiddle.net/icebob/0mg1v81e/256/

[reardestani]

Thanks, cool, I also took another approach and triggered input event on the <input /> in the js codes then added @input="value = $event.target.value" to the <input />.

var event = new Event('input', {
   'bubbles': true,
   'cancelable': true
});

this.dispatchEvent(event);