可以新增，可以刪除。動態的新增資料。

不用操作dom，只要操作json資料即可。

<form class="form-horizontal addForm"
      id="edit_form"
      @submit="checkForm"
      method="post"
      action="step_2_save"
      name="form1"
      enctype="multipart/form-data">
    <div class="form-group col-lg-12">
        <label class="control-label col-lg-4"></label>
        <label class="col-lg-5 text-left">配料</label>
        <label class="control-label col-lg-1">
            <button type="button" class="btn btn-xs btn-danger add-img" @click="add_item">新增配料</button>
        </label>
    </div>


    <div class="form-group" v-for="(item, i) in items">
        <label for="name" class="col-lg-2 control-label">名稱</label>
        <div class="col-lg-3"> <!-- 通過div控制長度 -->
            <input type="text" class="form-control" id="name" v-model="item.name" placeholder="料酒">
        </div>

        <label for="model" class="col-lg-2 control-label">規格</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" id="model" v-model="item.model" placeholder="1勺">
        </div>

        <label class="control-label col-lg-1 del-btn">
            <button type="button" class="btn btn-xs btn-danger del-img"  @click="remove_item(i)">刪除</button>
        </label>
    </div>


    <input type="hidden" name="id" id="id" value="{$id}" />
    <input type="hidden" name="page" id="page" value="{$page}" />
    <div class="form-group">
        <div class="col-lg-2 col-lg-offset-3">
            <button type="submit" class="btn btn-primary col-lg-8" id="edit_btn">下一步</button>
        </div>

        <div class="col-lg-2">
            <button type="button" class="btn btn-danger col-lg-8" @click="cancel">取消</button>
        </div>
        <div class="clear"></div>
    </div>
</form>
 

下面是JS

// 定義全域性鎖
var lock_flag = false;
var page = $('#page').val();

var in_data = '<?php echo json_encode($mill_dishes_material_list);?>';
in_data = JSON.parse(in_data);
console.log(in_data);

var app = new Vue({
    el: '#edit_form',
    data: {
        items: in_data
    },
    methods: {
        add_item:function() {
            var item = {
                'id':'',
                'name':'',
                'model':''
            };
            this.items.push(item);
        },
        remove_item:function(index) {
            this.items.splice(index,1);
        },
        checkForm: function (e) {
            if (this.items.length == 0) {
                layer.msg('請填寫配料資訊');
                e.preventDefault();
            }

            this.items.forEach(function (item,index) {
                if (item.name == '' || item.model== '') {
                    layer.msg('請完整填寫資訊');
                    e.preventDefault();
                }
            });

            if (!lock_flag) {
                lock_flag = true;
                var post_data = {};
                post_data.id = $("#id").val();
                post_data.items = this.items;
                $.ajax({
                    url: 'step_2_save',
                    data: JSON.stringify(post_data),
                    type: 'POST',
                    dataType:"json",
                    contentType:"application/json",
                    processData: false,
                    success: function (obj) {
                        lock_flag = false;
                        if(obj.errno == 0){
                            layer.msg("已儲存,進入下一頁");
                            setTimeout(function() {
                                window.location.href = 'step_3?id=' + obj.id + '&page=' + page;
                            },2000);
                        }else{
                            // 解鎖
                            lock_flag = false;
                            layer.msg(obj.errdesc);
                        }
                    },
                    error: function (data) {
                        // 解鎖
                        lock_flag = false;
                        layer.msg('系統錯誤');
                    }
                });
            }
            
            e.preventDefault();
        },
        cancel:function() {
            window.location.href='index?page=' + page;
        }
    }
});
 

下面是後臺處理

vendor('Func.Json');
$json = new Json();
// json傳入的資料
$json_data =  json_decode(file_get_contents("php://input"),true);
$id = (int)$json_data['id'];
$items = $json_data['items'];

$mill_dishes_material_model = M('mill_dishes_material');
$mill_dishes_material_model->where(['dishes_id'=>$id])->save(['is_del'=>1]);
foreach ($items as $k=>$item) {
    // 進行新增修改操作
    $info = $mill_dishes_material_model->where(['id'=>$item['id']])->find();
    if ($info) { // 修改
        $op_data = [
            'name'      => $item['name'],
            'model'     => $item['model'],
            'is_del'    => 0
        ];
        $mill_dishes_material_model->where(['id'=>$item['id']])->save($op_data);
    } else { // 新增
        $op_data = [
            'dishes_id' => $id,
            'name'      => $item['name'],
            'model'     => $item['model'],
            'add_time'  => time()
        ];
        $mill_dishes_material_model->add($op_data);
    }
}

$json->setErr(0, '操作成功');
$json->setAttr('id', $id);
$json->send();