如何在laravel中正确地实现CRUD json字段

Question

使用以下代码，我动态地为不同数量的产品属性添加字段：

$("#addRow").click(function () {
 var html = '';
 html += '<div id="inputFormRow">';
 html += '<div class="input-group mb-3">';
 html += '<input type="text" name="properties[{{i}}][key]" class="form-control m-input ml-3" value="{{ old('properties['.$i.'][key]') }}" placeholder="Key" autocomplete="off">';
 html += '<input type="text" name="properties[{{i}}][value]" class="form-control m-input ml-3" value="{{ old('properties['.$i.'][value]') }}" placeholder="Value" autocomplete="off">';
 html += '<div class="input-group-append ml-3">';
 html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
 html += '</div>';
 html += '</div>';
        
 $('#newRow').append(html);
});

  // remove row
$('#removeRow').on('click', function () {
 $(this).closest('#inputFormRow').remove();
});

这是我的html

@isset($product)
 @foreach($product->properties as $i=>$prod)
   <div class="input-group mb-3">
    <input type="text" name="properties[{{ $i }}][key]" value="{{ $prod[$i]['key'] }}" class="form-control m-input ml-3" placeholder="Key" autocomplete="off">
    <input type="text" name="properties[{{ $i }}][value]" value="{{ $prod[$i]['value'] }}" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
   <div class="input-group-append ml-3">
   <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
   </div>
  </div>
 @endforeach
@endisset

<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add field</button>

但是我不能做一个动态计数器，你以后怎么编辑这些字段？如何添加/删除？我从这个实现中学到了一个教训，但为了简单起见，它们占用了固定数量的字段，这很容易，但是如何使用动态字段呢？

Answer 1

First (用于动态计数器)在addRow选择器之前添加此i变量。然后在.click()函数中增加它

let i = 0;
$("#addRow").click(function () {
    i++;
   // now do your append() code
}

第二个(添加/删除行)添加行的Html+jquery代码已经存在。(Your Remove code may not work for multiple non-unique id)用于删除一行，在<div id="inputFormRow">下面添加一个button，该行下面有一个类，例如，如下所示的dynamic-remove：

<div id="inputFormRow">
<button type="button" class="dynamic-remove">Remove</button>

然后将jquery代码添加到onclick按钮上：

$('.dynamic-remove').click(function(){
    $(this).parent().remove()
})

第三次(编辑动态行)使用一个foreach并将您所附加的html代码放置在其中并填充它们：

@foreach($model_array as $i => $model)
    // your html code populated via $model object
@endforeach