当我点击“添加行”按钮时，如何在HTML表单中动态添加行？

Question

<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    <button>Add row</button>
</div>

所以，当我点击添加按钮时，我需要继续添加上面的行。当我点击添加行按钮时，我应该如何添加这一行？

我需要将值传递为“BOOKED UNDER：”。

[{
    act :,
    section:,
}]

如果我有更多的行需要传递值，我需要将它们作为逗号分隔的值。我对js不够熟练，这是我的第一个遇到这种问题的项目。我该如何以这种方式添加值。

我的vue js代码如下：

addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[],
        act: '',
        section:'',
    },
    methods: {
        handleSubmit: function(e) {
            var vm = this;
            data['otherNatureofOffense'] = //in the abve way
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

请帮我找一个解决方案

- Wanderer

---

你应该在这里阅读有关Vue.js组件的内容（官方文档）：https://vuejs.org/v2/guide/components.html - Junaid Anwar

是的先生，它会给出结果.. 但为什么呢？这不是我们的问题。 - Wanderer

@Wanderer 如果你想的话，我可以写一个纯JS的解决方案。 - Bakhtier Gaibulloev

@BakhtierGaibulloev 这已经足够了。 - Wanderer

@Wanderer 瞬间 - Bakhtier Gaibulloev

Answer 1

如果你使用JavaScript或jQuery，这可能会有所帮助。

var count=1;
$("#btn").click(function(){
  
  $("#container").append(addNewRow(count));
  count++;

});

function addNewRow(count){
  var newrow='<div class="row">'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Act '+count+'</label>'+
            '<input type="text" class="form-control" v-model="act" >'+
        '</div>'+
    '</div>'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Section '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    
</div>
</div>
<button id="btn">Add row</button>

- Deepu Reghunath

Answer 2

请尝试一下：

document.getElementById("clickMe").onclick = function () { 
        //first div
        var newDivCol = document.createElement("div");
        newDivCol.setAttribute("class","col-md-4");
        //second div
        var newDivForm = document.createElement("div");
        newDivForm.setAttribute("class","form-group label-floating");
        newDivCol.appendChild(newDivForm);

        //label
        var newlabel = document.createElement("label");
        newlabel.setAttribute("class","control-label");
        newlabel.innerHTML = "Here goes the text";
        newDivForm.appendChild(newlabel);

        //input
        var newInput = document.createElement("input");
        newInput.setAttribute("type","text");
        newInput.setAttribute("class","form-control");
        newInput.setAttribute("v-model","act");
        newDivForm.appendChild(newInput);

        var element = document.getElementById("addRowsHere");
        element.appendChild(newDivCol);
};

<div class="row" id="addRowsHere">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
</div>
<button id="clickMe">Add row</button>

https://jsfiddle.net/kkyunLzg/2/#

- Bakhtier Gaibulloev

---

在这种情况下，应该在哪里添加按钮？ - Wanderer

先显示这些行，下面写上“如果需要”，然后再添加行。 - Wanderer

应该做你想要的事情。在底部有链接，您可以查看它。 - Bakhtier Gaibulloev

Answer 3

你需要先使用v-for遍历字段，然后像这样提交模型：

<div class="row" v-for="(book, index) in bookedUnder" :key="index">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act {{index}}</label>
            <input type="text" class="form-control" v-model="book.act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section {{index}}</label>
            <input type="text" class="form-control" v-model="book.section">
        </div>
    </div>

</div>
<button @click="addNewRow">Add row</button>



addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[
          {
             act: null,
             section: null,
          },
        ],
    },
    methods: {
        addNewRow: function() {
          this.bookedUnder.push({ act: null, section: null, });
        },
        handleSubmit: function(e) {
            var vm = this;
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: vm.bookedUnder,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

- Georgi Antonov

---

谢谢您，先生。您救了我。 - Wanderer

Answer 4

根据您想要添加的行类型，有不同的解决方案。

如果您只想添加“Section”行，则可以在Vue中使用v-for，并将一个对象推送到与v-for连接的数组中：

模板：

<div class="col-md-4" v-for="(row, index) in rows" :key="index">
  <div class="form-group label-floating">
    <label class="control-label">Section </label>
    <input type="text" class="form-control" v-model="row.section">
  </div>
</div>
<button @click="addRow">
  Add Row
</button>

JS：

 data: {
   rows: [],
   defaultRow: {
     section: 'new-row'
   }
 },
 methods: {
   addRow() {
     // Clone the default row object
     this.rows.push(Object.assign({}, this.defaultRow))
   }
 }

如果您想添加不同类型的行，则必须创建Vue组件并将其添加，或者使用不同的默认行进行创意设计（例如为不同的输入添加不同类型）。

- Indyz

---

如何获取与上述问题相同的结果？你能帮我吗？ - Wanderer

如何以以下格式传递值[{ act :, section:, }] - Wanderer

我还需要在点击按钮之前显示第一行。 - Wanderer

要显示前一行，您可以在v-for上方插入HTML，或在启动时自动调用addRow()（在HTML挂载后 https://alligator.io/vuejs/component-lifecycle/）。为了仍然具有act和section值，您可以通过类似于示例的方式扩展代码。这只是一个概念示例，您需要自己实现它。 - Indyz

Answer 5

var count=1;
$("#btn").click(function(){
  
  $("#container").append(addNewRow(count));
  count++;

});

function addNewRow(count){
  var newrow='<div class="row">'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Act '+count+'</label>'+
            '<input type="text" class="form-control" v-model="act" >'+
        '</div>'+
    '</div>'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Section '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    
</div>
</div>
<button id="btn">Add row</button>

- Octave Matamba