Vue 點擊添加生成一組輸入框

場景：需要通過點擊添加按鈕，來增加一組輸入框，填寫信息。

 

通過for循環數據的方式實現，點擊添加，向數組中增加一組數據

table數據

 <el-form-item label="請求頭" :label-width="formLabelWidth">
          <div
            class="paramdatadiv"
            v-for="(item, i) in form.head"
            :key="item.id">
            <el-input class="divinput" v-model="item.head_key"></el-input>
            <el-input class="divinputs" v-model="item.head_val"></el-input>

            <el-button
              class="btn2"
              type="danger"
              @click="del_head(item.head_key)"
              v-show="!(form.head.length == i + 1)"
              >刪除</el-button>

            <el-button
              class="btn2"
              type="primary"
              @click="add_head"
              v-show="form.head.length == i + 1"
              >添加</el-button>
          </div>
 </el-form-item>

 

data() {
    return {
      form: {
        head: [{ head_key: "", head_val: "" }]
      },
    };

 

add_head() {
      this.form.head.push({ keys: "", val: "" });
},