Сгенерировать форму из JSON на vue js?

Question

[Aleksandr]

Я уже задавал вопрос, но так и не разобрался.
есть JSON, который приходит от сервера с описанием полей

также нашел два плагина, которые помогают частично решить данную задачу
адын
два

Отлично генерируются формы, но данные, например для select статичны

Каким образом например при помощи этого
можно повесить например на select какой-то метод для хагрузки данных с бека?
Работаю в связке с element-ui и вот есть такой пример

Вот определяет триггер для select

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

Но каким образом добавить какую-то функцию при изменение например?

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

Спасибо

Answer 1

[lavezzi1]

Не понял про "определяет триггер для селект". Вешать какие то вызовы нужно на события компонента, например @change или @visible-change в случае с select от element-ui. Ознакомьтесь более внимательно с API компонента тут: element.eleme.io/#/en-US/component/select (таблицы внизу страницы).

Если я правильно понял, вам нужно при открытие селекта стянуть данные? Тогда нужно делать примерно так:

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

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

Comments

[Aleksandr]

это понятно. Вопрос в том, что все эти компоненты (select, input...) генерируются из JSON
и вот вопрос как на них повесить обработчики?

Answer 2

[Orfen]

Сделай свои компоненты под каждый тип поля : 1. my-text-field component 2.my-select component 3. radio component. В my-text-field могут быть props, например: rules, validate, autocomplete, которые позволят расширить компонент и придумать фичи. Теперь про эвенты. Например, компонент my-text-field, в нем в data создаешь value: null. Вешаешь watch на этот инпут, а в методе вотчера кидаешь внутренний эвент компоненту выше.

Пример, как бросить эвент родительскому компоненту :

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

Пример, как поймать эвент поймать эвент в родительском компоненте:

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

Теперь про родительский компонент.
Создай компонент base-form, в нем укажи props с названием formFields. Туда передай массив объектов, где каждый объект это поле.
Например объект под

formFields: [
 {
    name: 'my_field',
    class: 'moi_class',
    type: 'input',
    component: 'my-text-field'
    id: 'moi_id',
  }
];

Вот, в props это все дело передал, распарсил как тебе надо в created() методе компонента ( ну подготовил данные как тебе под вывод). Ну а дальше идешь в base-form.vue, там делаешь что-то подобное:

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

Постарался примерно объяснить, времени особо нет, чтобы долго объяснять, надеюсь примерно понял, если нужна будет помощь - пиши.)