vue 删除和修改

<div id="app">
    <section v-show="isShow">
        <div>
            <label>编号：</label>
            <input type="text" class="form-control" v-model="role.ID" />
        </div>
        <div>
            <label>名称：</label>
            <input type="text" class="form-control" v-model="role.Name" />
        </div>
        <div>
            <label>备注：</label>
            <input type="text" class="form-control" v-model="role.Remark" />
        </div>
        <input type="button" v-on:click="sets(v.id)" value="修改" class="btn btn-danger" />
        <input type="button" v-on:click="seach()" value="保存" class="btn btn-danger" />
    </section>


    <input type="button" v-on:click="add()" value="新增" class="btn btn-danger" />


    <section>
        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(item ,id) in items">
                    <td>  {{item.ID}}  </td>
                    <td>   {{item.Name}}  </td>
                    <td>   {{item.Remark}}  </td>
                    <td>  <input type="button" v-on:click="dlt(id)" value="删除" class="btn btn-danger" /> </td>
                    <td>  <input type="button" v-on:click="update(id)" value="修改" class="btn btn-danger" /> </td>
                </tr>
            </tbody>



        </table>

    </section>

</div>

@section scripts{
    <script type="text/javascript">
        var v = new Vue({
            el: "#app",
            data: {
                isShow: false,
                role: { "ID": 1, "Name": "诸葛亮", "Remark": "八卦" },
                items: [
                    { "ID": 1, "Name": "诸葛亮", "Remark": "八卦" },
                    { "ID": 2, "Name": "刘备", "Remark": "八卦" },
                    { "ID": 3, "Name": "关羽", "Remark": "青龙偃月刀" }
                ],
                id: 0 //用于保存修改的索引
            },
            methods: {
                add: function () {
                    this.isShow = true;

                    this.role = { "ID": 0, "Name": "", "Remark": "" };
                },
                seach: function () {
                    this.items.push(this.role);
                    this.isShow = false;
                },
                dlt: function (id) {
                    this.items.splice(id, 1);

                },
                update: function (id) {
                    this.isShow = true;
                    this.role = JSON.parse(JSON.stringify(this.items[id]));
                    this.id = id;

                },
                sets: function (id) {
                    this.items[id] = this.role;
                    this.isShow = false;

                }


            }


        })


    </script>

}