当我单击“添加行”按钮时，如何动态地将行添加到 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;
        }, 
    },
});

请帮助我找到解决方案

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>