Generate the form from JSON in vue js?

I have already asked the question but did not understand.
is JSON that comes from server field descriptions

also found two plugins that help partially to solve this problem
adyn
two

Well generated shape, but the data, for example, to select static

How for example by using this
you can hang for example to select a method for haroski data from Beck?
Working in conjunction with the element-ui and here is such an example

That determines a trigger to select
const trigger = ['radio', 'checkbox', 'select'].includes(field.type)
 ? 'change' : 'blur'


But how to add some function when the change for example?
FormSchema.setComponent('select', 'el-select', {
// here you can pass props, but not metdods
})


Thank you
June 5th 19 at 22:00
2 answers
June 5th 19 at 22:02
I do not understand about "defines the trigger for the select". Hang some challenges need to component events, for example @change or @visible change in the case from a select element-ui. Read more carefully the API here: element.eleme.io/#/en-US/component/select (tables at bottom).

If I understand correctly, you need to open up the select to pull the data? Then you need to do something like this:
<element-select @visible-change="fetchData"></element-select>

methods: {
 fetchData(isOpen) {
 if (isOpen) {
fetch(url);
}
}
}
it is clear. The issue is that all of these components (select, input...) are generated from JSON
the question is how do they hang handlers? - rowan43 commented on June 5th 19 at 22:05
June 5th 19 at 22:04
Do your components for each field type : 1. my-text-field component 2.my-select component 3. radio component. My-text-field can be props, for example: rules, validate autocomplete, which will allow you to extend the component and come up with features. Now, about the events. For example, a component my-text-field in data create value: null. Hang watch on this input, and in the method votcher throw internal event to the component above.

An example of how to throw the event of the parent component :
//ChildLolComponent
methods:{
lol(){
 this.$emit('lolEvent', this.lol)
}
}


Example how to catch event to catch the event on the parent component:
//ParentLolComponent
 <lol @lolevent="название_вашего_метода_для_принятия_данных"></lol>


Now, about the parent component.
Create component base-form, it show props called formFields. There pass an array of objects, where each object is a field.
For example the object under
formFields: [
{
 name: 'my_field',
 class: 'moi_class',
 type: 'input',
 component: 'my-text-field'
 id: 'moi_id',
}
];


Here, in props it's all a matter passed, was responsil as you have in the created() method of the component ( well prepared data as you output). Well, then go to base-form.vue, doing something like this:

//this.$emit(changeData, value) -- assume event will call changeData
<div v-for="field in parsedFields"> 
 <component :is="field.component" @changedata="НАЗВАНИЕ_МЕТОДА_КОТОРЫЙ_БУДЕТ_ПРИНИМАТЬ_В_СЕБЕ_ЗНАЧЕНИЕ"> 
</component></div>


Tried to explain there is too much time to long to explain, I hope understand about if you need help - write.)

Find more questions by tags Vue.js