如何在Vue.js的fields[]中添加多组sections[]与subfields[]

我来帮你搞定这个需求！目前你的代码只能给每个fields项添加单个section和subfield，要支持多组的话，咱们需要调整模板渲染逻辑，再加上对应的添加方法，具体步骤如下：

1. 先修正拼写小问题（重要！） #

先提个小细节：你代码里的feilds和subfeilds是拼写错误，正确的应该是fields和subfields，后续我会用正确的拼写来修改代码，避免后续数据处理出问题。

2. 修改Vue模板，循环渲染多组sections和subfields #

把原来单个的section和subfield输入框，改成用v-for循环渲染数组里的每一项，同时给每个field添加“添加Section”和“添加Subfield”的按钮：

<div class="col-md-12 mr-auto" id="regBox">
  <form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);">
    <!-- 原有type和text输入部分保持不变 -->
    <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>

    <!-- 修改后的fields循环部分 -->
    <div class="card-content" v-for="(bok, fieldIndex) in fields" :key="fieldIndex">
      <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>

      <!-- Sections 部分：循环渲染每个section -->
      <div class="mb-3">
        <h5>Sections</h5>
        <div class="form-group" v-for="(section, secIndex) in bok.sections" :key="secIndex">
          <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[secIndex]" required="">
          </div>
        </div>
        <a @click="addSection(fieldIndex)" class="btn btn-sm btn-outline-primary mt-1">Add Another Section</a>
      </div>

      <!-- Subfields 部分：循环渲染每个subfield -->
      <div class="mb-3">
        <h5>Subfields</h5>
        <div class="form-group" v-for="(subfield, subIndex) in bok.subfields" :key="subIndex">
          <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.subfields[subIndex].name" required="">
          </div>
        </div>
        <a @click="addSubfield(fieldIndex)" class="btn btn-sm btn-outline-primary mt-1">Add Another Subfield</a>
      </div>

      <h3>The JSON value of <code>bok</code></h3>
      <textarea rows="3" cols="75%" readonly>{{ JSON.stringify(bok) }}</textarea>
    </div>

    <a @click="addNewRules" class="btn btn-sm btn-outline-secondary">Add Another Rule</a>
    <div class="text-center mt-3">
      <button class="btn btn-primary btn-round">Get Started</button>
    </div>
  </form>
</div>

3. 更新Vue实例代码，添加对应的添加方法 #

调整data里的拼写，然后新增addSection和addSubfield方法，用来给指定的field添加新的section或subfield：

regBox = new Vue({
  el: "#regBox",
  data: {
    type:'',
    text:'',
    // 修正拼写为fields，初始化结构保持不变
    fields : [{
      name : null,
      sections:[null],
      subfields : [{name:null}],
    }],
  },
  methods: {
    addNewRules: function() {
      this.fields.push({
        name : null,
        sections:[null],
        subfields : [{name:null}],
      });
    },
    // 添加新的Section到指定索引的field
    addSection(fieldIndex) {
      this.fields[fieldIndex].sections.push(null);
    },
    // 添加新的Subfield到指定索引的field
    addSubfield(fieldIndex) {
      this.fields[fieldIndex].subfields.push({name: null});
    },
    handelSubmit: function(e) {
      var vm = this;
      data = {};
      data['fields'] = this.fields; // 这里也修正拼写
      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;
    },
  },
});

关键改动说明： #

• 用v-for循环渲染sections和subfields数组里的每一项，这样每添加一个新元素，模板就会自动渲染出对应的输入框
• 新增的addSection和addSubfield方法接收fieldIndex参数，用来定位要修改的是哪个fields项，然后往对应的数组里push新的初始值
• 修正了拼写错误，避免后续数据提交时出现字段不匹配的问题

现在你就可以给每个规则添加多个sections和subfields了，提交的时候这些多组数据都会被正确包含在fields数组里发送到后端哦！

内容的提问来源于stack exchange，提问作者coder