Динамически создавать форму на основе данных json в vue js html? рабочий пример предоставлена

В настоящее время я пытаюсь освоить vue.js и пытаюсь создать форму, которая создается динамически.

В деталях, у меня есть файлы json, которые определяют, какие типы ввода будут помещены в эту форму; сейчас я пытаюсь понять, как я мог реализовать это в vue.js.

Например, когда я получил данные json, мне нужно было указать тег select с различными параметрами, при нажатии на конкретную опцию введите текстовые поля ввода или параметры на основе данных json в форме.

Я предполагаю, что именно здесь могут появиться компоненты, но как я могу их динамически визуализировать и как я могу включить это, не имея тонны шаблонов в моем html. v-для?

Приведена рабочий пример, сделанная в настоящее время, с которой много проблем.

https://jsfiddle.net/ahnu5zz9/

Мне нужно отправить данные как

rules : [{
        name:null,
        section:null,
        data   : [{head:null,value:null}]
    }],  

Есть ли способ после моего первого выбора разделить поле ввода на компоненты в vue.js и вызвать компоненты на основе выбора?

Итак, когда я выбираю 1-й вариант индийского акта 1931 года, появляется поле ввода оружия (если есть). Так что в этом случае мне нужна моя v-модель как bok.data[0].head.arms (если есть). В следующем случае, когда я выберу вариант 2. появится поле с количеством, поэтому мне нужно отправить данные как bok.data[0].head.qty.

В третьем случае 1 выберите ker, в раскрывающемся списке появятся как wild, так и enc. При нажатии на это появляется другое поле ввода. Когда нажимаю wild, появляется qty и item. Итак, мне нужно отправить эти значения как bok.data[0].value.qty и bok.data[0].value.item.

Кроме того, мне нужно иметь несколько вариантов выбора для wild и enc. Я могу выбрать как wild, так и enc с помощью multiple = "".

Я СПРАШИВАЮ ОБ ЭТОМ В ПОИСКАХ ОТВЕТА. Я попросил его из другого аккаунта, но никто мне не помог .. Пожалуйста, помогите мне .. Нужна помощь. Я новичок, пожалуйста, помогите мне .. или, пожалуйста, дайте контакт любого, кто может мне помочь ..

«Я спросил это из другой учетной записи, но никто мне не помог» - создание нескольких учетных записей, чтобы задать один и тот же вопрос, совершенно бесполезно.

Adam 29.05.2018 14:36

вы можете создать компонент для каждого из ваших подполей

madalinivascu 29.05.2018 14:41

@madalinivascu, не могли бы вы помочь мне .. не могли бы вы предоставить мне решение

Soul 29.05.2018 14:43

@ Адам, я знаю, что это нехорошо, не могли бы вы помочь мне, сэр,

Soul 29.05.2018 14:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
1 949
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените свой ввод на

 <input type = "text" class = "form-control" v-model = "bok.data[0][all3.name]">

демонстрация или же

  <input type = "text" class = "form-control" v-model = "bok.data[0]['value'][all3.name]">
  data   : [{head:null,value:{}}]

демонстрация

сэр, спасибо за помощь. мне также нужно несколько вариантов выбора для wild и enc .. как это тоже

Soul 29.05.2018 15:04

затем вы делаете что-то вроде bok.data[0]['value'][0][all3.name] и меняете определение данных на data : [{head:null,value:[{qty:null,item:null}]}]

madalinivascu 29.05.2018 15:06

сэр, на самом деле я имею в виду <select class = "form-control" v-model = "bok.data [0] .head" name = "rule" @ change = "setRule (bok)" multiple = ""> <option value = "" selected disabled disabled hidden> Выберите "Тип" здесь </option> <option v-for = "pl in bok.allen1" v-bind: value = "pl.refId"> {{pl.name}} </option> < / выбрать>

Soul 29.05.2018 15:20

проверено, но в это время поля ввода не загружаются в скрипт

Soul 29.05.2018 15:25

можешь проверить пожалуйста

Soul 29.05.2018 15:26

привет сэр, вы проверили

Soul 29.05.2018 15:32

Сэр, также как я могу «создать компонент для каждого из ваших подполей». Если можете, предоставьте мне решение, используя этот

Soul 29.05.2018 15:33

сэр, пожалуйста, проверьте, при каждом щелчке в поля ввода добавляются

Soul 31.05.2018 08:37

@Soul да, они есть, если вам нужно несколько выбранных вариантов, они это сделают

madalinivascu 31.05.2018 08:40

нет, сэр, просто проверьте, он продолжает добавлять. когда я нажимаю дикий и снова дикий, поля ввода продолжают добавлять

Soul 31.05.2018 13:57

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

madalinivascu 31.05.2018 14:21

Другие вопросы по теме