Как добавить несколько разделов [] и вложенных файлов [] внутри полей [] в vue js html?

Question

Как добавить несколько sections[] и subfields[] внутри fields[]?

Моя HTML-форма:

    <div class="col-md-12 mr-auto" id="regBox">
      <form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);">                    
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="material-icons">room</i>
              </span>
            </div>
            <select class="form-control" v-model="type" name="type" required="">
              <option value="" selected disabled hidden>Choose Type here</option>
              <option value="option">option</option> 
              <option value="text">text</option> 
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="material-icons">account_circle</i>
              </span>
            </div>
            <input type="text" class="form-control" placeholder="Rule Name" v-model="text" required="" maxlength="20">
          </div>
        </div>
        <div class="card-content" v-for="(bok, index) in feilds" :key="index">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="material-icons">face</i>
              </span>
            </div>
            <input type="text" class="form-control" placeholder="Name..." v-model="bok.name" required="">
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="material-icons">face</i>
              </span>
            </div>
            <input type="text" class="form-control" placeholder="Section..." v-model="bok.sections[0]" required="">
          </div>
        </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <i class="material-icons">face</i>
            </span>
          </div>
          <input type="text" class="form-control" placeholder="Name..." v-model="bok.subfeilds[0].name" required="">
        </div>
      </div>
      <h3>The JSON value of <code>bok</code></h3>
      <textarea rows="3" cols="75%" readonly>{{ JSON.stringify(bok) }}</textarea>
    </div>
    <a @click="addNewRules">Add Another Rule</a>
    <div class="text-center">
      <button class="btn btn-primary btn-round">Get Started</button>
    </div>
  </form>
</div>

Код VueJS:

regBox = new Vue({
el: "#regBox",
  data: {
   type:'',
   text:'',
   feilds : [{
        name : null,
        sections:[null],
        subfeilds : [{name:null}],

    }],
  },

  methods: {
    addNewRules: function() {
    this.feilds.push({  name : null,
        sections:[null],
        subfeilds : [{name:null}],
         });
        },
     handelSubmit: function(e) {
           var vm = this;
           data = {};
           data['feilds'] = this.feilds;
           data['type'] = this.type;
           data['text'] = this.text;
            $.ajax({
              url: 'http://localhost:4000/add/act/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
                        if (e.status)
              {
                alert("Registration Success");


            }
              else {
                alert("Registration Failed");
                vm.response = e;

              }
          }
            });
            return false;
},
},
});

Моя проблема возникает, когда я добавляю fields[].sections[] должен быть массивом, так как я могу добавить несколько разделов внутри полей.Также, как я могу добавить несколько подполей внутри fields[].

Предоставленный код работал отлично.Единственная проблема заключается в том, что я не могу иметь несколько sections[] и subfields[], что требуется.

Answer 1

<form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">room</i> </span> </div> <select class="form-control" v-model="type" name="type" > <option value="" selected disabled hidden>Choose Type here</option> <option value="option">option</option> <option value="text">text</option> </select> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">account_circle</i> </span> </div> <input type="text" class="form-control" placeholder="Rule Name" v-model="text" maxlength="20"> </div> </div> <div class="card-content" v-for="bok in feilds"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" placeholder="Username..." v-model="bok.name" > </div> </div> <div v-for="child in bok.subfeilds"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" placeholder="Offences..." v-model="child.name" > </div> </div> </div> <a class="btn btn-success" @click="addChild(bok)">Add Offence</a> <div v-for="(secure,index) in bok.sections"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" placeholder="Section..." v-model="bok.sections[index]" > </div> </div> </div> <a class="btn btn-success" @click="addSection(bok)">Add</a> <h3>The JSON value of <code>bok</code></h3> <textarea rows="3" cols="75%" class="form-control" readonly>{{ JSON.stringify(bok) }}</textarea> </div> <a @click="addNewRules">Add Another Rule</a> <div class="text-center"> <button class="btn btn-primary btn-round">Get Started</button> </div> </form>

regBox = new Vue({
el: "#regBox",
  data: {
   type:'',
   text:'',
   feilds : [{
        name : null,
        sections:[],
        subfeilds : [{name:null}],      
    }],
  },

  methods: {
        addNewRules: function() {
        this.feilds.push({  name : null,
        sections:[],
        subfeilds : [{name:null}],
         });
        },
        addChild: function(bok) {
              bok.subfeilds.push({});
        },
        addSection: function(bok) {
              bok.sections.push({});
        },
     handelSubmit: function(e) {
           var vm = this;
           data = {};
           data['feilds'] = this.feilds;
           data['type'] = this.type;
           data['text'] = this.text;
            $.ajax({
              url: 'http://localhost:4000/add/act/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
                        if (e.status)
              {
                alert("Registration Success");


            }
              else {
                alert("Registration Failed");
                vm.response = e;

              }
          }
            });
            return false;
},
},
});

---

Я добавил петли в каждом случае.Просто проверьте, что вы ожидали