Member 13840503 Ответов: 0

Как динамически добавлять поля ввода на основе данных json в vue js HTML?

Мои данные JSON

[ { "_id": "5b052126c3a5552bac060fab", "refId": 7929, "type": "text", "text": "Indian Act 1931", "__v": 0, "feilds": [ { "refId": 7912, "name": "arms(if any)", "_id": "5b052126c3a5552bac060fac", "sections": [], "subFeilds": [] } ] }, { "_id": "5b05244f90a7000f44bcbbb6", "refId": 7930, "type": "text", "text": "Narcotic", "__v": 0, "feilds": [ { "refId": 7913, "name": "qty", "_id": "5b05244f90a7000f44bcbbb7", "sections": [], "subFeilds": [] } ] }, { "_id": "5b052b4090a7000f44bcbbbf", "refId": 7933, "type": "option", "text": "Ker", "__v": 0, "feilds": [ { "refId": 7918, "name": "wild", "_id": "5b052b4090a7000f44bcbbc2", "sections": [ "sec1", "sec2" ], "subFeilds": [ { "refId": 17890, "name": "qty", "_id": "5b052b4090a7000f44bcbbc4" }, { "refId": 7891, "name": "item", "_id": "5b052b4090a7000f44bcbbc3" } ] }, { "refId": 7919, "name": "enc", "_id": "5b052b4090a7000f44bcbbc0", "sections": [ "sec2" ], "subFeilds": [ { "refId": 7892, "name": "qty", "_id": "5b052b4090a7000f44bcbbc1" } ] } ] } ]

Сначала мне нужно показать варианты как

<div id="add">
 <div class="card-content" v-for="(bok, index) in rules" :key="index">
  <select class="form-control" v-model="bok.name" name="type" >
  <option value="" selected disabled hidden>Choose Type here</option>
  <option v-for="post in data" v-bind:value="post.refId" >{{post.text}}</option>
 </div>
 </select>
 </div>
 </div>

Итак, если я наберу опцию 1(refId:7929), мне нужно показать поля ввода

имя : оружие(если таковое имеется) с типом="текст".

Мне нужно отобразить следующее поле ввода, если я выберу refId:7929. Мне нужно динамически сформировать следующее поле на основе приведенных выше данных json.




Оружие(если таковое имеется)




Если я выберу опцию 3:refId:7933, я должен выбрать опцию, имеющую как wild, так и enc. Если я выберу опцию wild, я должен показать поля ввода как qty, так и item. Если я выберу опцию enc, то я должен показать поле ввода с именем qty.

Мой код vue js таков

приложение = новый Vue({
Эл: "#приложение",
данные: {
правила : [{
наименование:нулевой,
раздел:null,
данные : [{head:null,value:null}]
}],
данные:[],
},
установил: функция() {
var vm = это;
$.Аякс({
URL-адрес: "http://localhost:4000/get/acts",
метод get",
тип данных: "JSON",
успех: функция(e) {
if (e.status == 1) {
ВМ.данные = е.данных; сведения //в JSON
};
},
});

},
handleSubmit: функция(e) {

--запрос AJAX--
}
}
})

;

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

Заранее спасибо. Пожалуйста, не понижайте голос. Смиренная просьба об ответе

Что я уже пробовал:

<div id="add">
   <div class="card-content" v-for="(bok, index) in rules" :key="index">
    <select class="form-control" v-model="bok.name" name="type" >
    <option value="" selected disabled hidden>Choose Type here</option>
    <option v-for="post in data" v-bind:value="post.refId" >{{post.text}}</option>
   </div>
   </select>
   </div>
   </div>

0 Ответов