Generate form from JSON in vue js?

Question

Vue.js

I already asked the question, but did not understand.
there is a JSON that comes from the server with a description of the fields I
also found two plugins that help to partially solve this problem adyn two
Forms
are generated perfectly, but the data, for example, for
select is static hagruzki data from bek? I work in conjunction with element-ui and here is such an example Here it defines a trigger for select

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

But how to add some function when changing for example?

FormSchema.setComponent('select', 'el-select', {
// вот сюда можно передать props, но не metdods
})

Thanks

Answer 1

Did not understand about "defines the trigger for". You need to hang some calls on component events, for example @change or @visible-change in the case of select from element-ui. Take a closer look at the component API here: element.eleme.io/#/en-US/component/select (tables at the bottom of the page).
If I understand correctly, you need to pull the data when opening the select? Then you need to do something like this:

<element-select @visible-change="fetchData"></element-select>

methods: {
  fetchData(isOpen) {
    if (isOpen) {
      fetch(url);
    }
  }
}

Answer 2

Make your own components for each field type: 1. my-text-field component 2.my-select component 3. radio component. My-text-field can contain props, for example: rules, validate, autocomplete, which will allow you to extend the component and come up with features. Now about events. For example, the my-text-field component, in it in data you create value: null. You hang watch on this input, and in the watcher method you throw an internal event to the component above.
An example of how to throw an event on a parent component:

//ChildLolComponent
methods:{
     lol(){
           this.$emit('lolEvent', this.lol)
      }
}

An example of how to catch an event to catch an event in a parent component:

//ParentLolComponent
     <lol @lolEvent="название_вашего_метода_для_принятия_данных" />

Now about the parent component.
Create a base-form component, specify props in it with the name formFields. Pass an array of objects there, 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, I passed this whole thing to props, parsed it as you need in the created () method of the component (well, I prepared the data as you would like for the output). Well, then you go to base-form.vue, there you do something like this:

//this.$emit(changeData, value) -- предположим эвент будет называть changeData
<div v-for="field in parsedFields"> 
      <component :is="field.component" @changeData="НАЗВАНИЕ_МЕТОДА_КОТОРЫЙ_БУДЕТ_ПРИНИМАТЬ_В_СЕБЕ_ЗНАЧЕНИЕ"> 
</div>

I tried to explain roughly, there is not much time to explain for a long time, I hope I understood roughly, if you need help - write.)