Vue.JS 单页应用 - 联系人管理（三）

前言

上一篇中，数据在表格和表单中实现了同步显示，修改表单数据时，表格中的数据也同时变化，这说明MVVM的双向绑定已经很好实现了。
但是，实际的生产环境中，我们希望表单中的数据，在点击“保存”按钮之前，不要同步到数据列表中。
同时，我们也将一并实现CRUD的代码。

开发环境

引入一个新的JS库 Underscore，介绍请看这儿， Github 链接

CRUD 实现

HTML修改

• Form表单添加 v-on:submit:prevent
• 添加新增、删除按钮

<form class="form-horizontal" role="form" v-on:submit.prevent>   
...
<div class="col-sm-offset-2 col-sm-10">
    <button @click="newrow" class="btn btn-primary">新增</button>
    <button @click="saverow" class="btn btn-primary">保存</button>
    <button @click="deleterow" class="btn btn-danger">删除</button>
</div>

JS 修改

showrow: function(value) {
  //this.row = value
  this.row=JSON.parse(JSON.stringify(value))
},
newrow: function(){
  this.row={id:0, name: '', birthday: '',phone: ''}
},
saverow: function(){
  if(this.row.id===0){
     this.row.id=_.max(this.list, function(stooge){ return stooge.id; }).id+1
         this.list.push(JSON.parse(JSON.stringify(this.row)))
  }else {
    Object.assign(this.list.find(x=>x.id===this.row.id),this.row)
  }
},
deleterow: function(){
  if(this.row.id!=0){   
     this.list.splice(_.findIndex(this.list, {id:this.row.id}),1)
  }
  this.newrow()
}

//_.max和_.findIndex是Underscore库中的函数，js原生函数对于Array的操作稍嫌复杂。

1. 数据读取(R)
   showrow，原来使用this.row=value，会导致表单使用和列表行同一个对象，所以我们看到表单中的修改，即时显示在表格中。
   使用序列化反序列化，创建一个新的对象，表单数据对象相当于只是表格行对象的一个克隆。如果使用value.clone在这儿也是可以的，但需要注意的是，Javascript的默认实现clone只是浅复制。
2. 新增数据(C)
   newrow，直接将表单数据对象row重置为空对象即可。
3. 更新数据(U)
   saverow，这儿需要判断，是新数据，还是旧数据，ID=0表示数据为新数据。
   3.1 如果是新数据，先取出列表中，最大的ID，增加1，赋值给当前表单对象ID。将表单对象克隆后放入数据列表中。
   3.2 如果是就数据，从列表中找到当前表单数据的对应行，复制表单对象的属性值到列表行对象的对应属性中。
4. 删除数据(D)
   deleterow，判断是旧数据还是新数据，新数据无需对列表进行操作，只需要将表单对象重置即可。旧数据的话，从列表中找到对应行，删除。

运行演示

JSFiddler

下集预告

表格组件化尝试

系列文章目录

1. 列表显示
2. 表单显示
3. 表单CRUD
4. Vue组件化
5. 从前端到后端