• Как организовать динамическую форму?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Метаданные формы - массив объектов, содержащих имя поля, имя компонента, с которым будет взаимодействовать пользователь, объект параметров для компонента:

    const formMeta = ref([
      {
        name: '...',
        component: '...',
        props: { ... },
      },
      ...
    ]);

    Данные формы - объект, в качестве ключей будут выступать значения свойств name элементов formMeta. Изначально можно сделать пустым: const formData = ref({});. Можно явно задать начальные значения:

    const formData = ref({
      имяПоля1: значение1,
      имяПоля2: значение2,
      ...
    });

    Или есть вариант доставать ключи и дефолтные значения из метаданных:

    const formData = ref(Object.fromEntries(formMeta.value.map(n => [
      n.name,
      n.defaultValue ?? null,
    ])));

    На основе formMeta создаётся форма, через v-model свойства formData связываются с экземплярами компонентов:

    <form>
      <div v-for="n in formMeta">
        <component
          :is="components[n.component]"
          v-model="formData[n.name]"
          v-bind="n.props"
        />
      </div>
    </form>

    Вот как-то так.
    Ответ написан
    1 комментарий
  • Как организовать динамическую форму?

    Для динамического рендеринга по схеме, где данными описано, что рендерить, в целом достаточного просто циклом пройтись по этим данным и вывести нужный компонент через динамический компонент.

    ```html

    {{ specification.name }}
    :is="componentForFormElement[specification.type]"
    :id="some-generated-id"
    v-model="results[specification.name]"
    :required="specification.is_required"
    :options="specification.options"
    />

    ```

    Конкретный вид будет зависеть от того, что у вас есть для вывода элементов формы, но общая идея - динамически выводить нужный компонент, в зависимости от `type`. Самое удобное, если для каждого типа есть свой компонент. и они имеют одинаковый интерфейс, чтобы им можно было одинакового передать параметры.

    Если компонентов нет, можно сделать и топорно - прямо ифами в шаблоне определять, как рендерить в зависимости от типа.

    По второму вопросу - можно сделать объект, где ключ - имя поля формы (правда, у вас будто нет поля в описании для этого, потому я использовал name), а значение - значение элемента формы по этому имени.
    Ответ написан
    1 комментарий
  • Есть ли в React аналог querySelector()?

    @Niksak
    useRef)
    Ответ написан
    Комментировать
  • Как запустить два проекта на разных портах в Apache?

    emekhanikov
    @emekhanikov
    Разработчик и архитектор программного обеспечения
    Добрый вечер!
    А по логам Apache видно что подключение к 8888 происходит?
    Если нет, вероятно, порт 8888 закрыт файрволом, надо открыть (как именно зависит от файрвола)

    А если зайти на сервер по SSH и выполнить
    curl -vik 127.0.0.1:8888 Есть ответ? видно по логам что запросы доходят по логам?
    Если есть и доходит то весьма вероятно что файрвол
    Если так же таймауты, может дело в ProxyPass, сервер на 3000 порту точно работает?
    Ответ написан
    2 комментария