由于在新建模式和修改模式下标题内容是不同的，因此需要修改modal-dialog的slot="header"部分。
根据item.customerId是否有值确定修改模式和新建模式，修改模式下显示"Edit Customer - xxx"，新建模式下显示"Create New Customer"

<modal-dialog v-bind:show.sync="show"> <header slot="header"> <h1>{{ item.customerId ? 'Edit Customer - ' + item.contactName : 'Create New Customer' }}</h1> </header> </modal-dialog> 4. 修改Vue实例

为data选项添加title属性，用于显示对话框的标题。

var demo = new Vue({ el: '#app', data: { // ...已省略 title: '' // ...已省略 } // ...已省略 })

然后追加3个方法：loadCustomer, saveCustomer和updateCustomer。

loadCustomer: function(customerId) { var vm = this vm.gridData.forEach(function(item) { if (item.customerId === customerId) { // 使用$.set设置item vm.$set('item', item) return } }), vm.$set('show', true) }, saveCustomer: function() { this.item.customerId ? this.updateCustomer() : this.createCustomer() this.show = false }, updateCustomer: function() { // 定义vm变量，让它指向this,this是当前的Vue实例 var vm = this, callback = function(data) { // 更新成功后，重新加载页面数据 vm.getCustomers() } // 将vm.item直接PUT到服务端 ajaxHelper.put(vm.apiUrl + 'http://www.cnblogs.com/' + vm.item.customerId, vm.item, callback) }
saveCustomer方法根据item.customerId是否有值确定修改模式和新建模式，如果是新建模式则调用createCustomer方法，如果是修改模式则调用updateCustomer方法。

另外，需要将Save按钮的click事件绑定到saveCustomer方法。

<div slot="body"> <!--...已省略--> <div> <label></label> <button @click="saveCustomer">Save</button> </div> <!--...已省略--> </div>

5. 添加$watch

使用$watch跟踪data选项show属性的变化，每当关闭对话框时就重置item。

demo.$watch('show', function(newVal, oldVal){ if(!newVal){ this.item = {} } })

为什么要这么做呢？因为每次打开对话框，不知道是以新建模式还是修改模式打开的，如果不重置item，倘若先以修改模式打开对话框，再以新建模式打开对话框，新建模式的对话框将会显示上次打开的数据。

View Demo

实现DELETE请求 1. 修改simple-grid组件

在methods选项中添加方法deleteEntry：

deleteEntry: function(entry) { this.$dispatch('delete-entry', entry) }

调用$.dispatch向父组件派发事件delete-entry。

2. 修改Vue实例的HTML

在simple-grid标签上绑定自定义事件delete-entry，该事件指向deleteCustomer方法。

<div> <!--...已省略--> <div> <simple-grid :data-list="gridData" :columns="gridColumns" v-on:load-entry="loadCustomer" v-on:delete-entry="deleteCustomer"> </simple-grid> </div> <!--...已省略--> </div>

View Demo

总结

本篇介绍了同源策略、跨域、CORS和REST等概念，并结合Vue.js和$.ajax实现了一个简单的CURD跨域示例。
下一篇，我们将使用Vue的插件vue-resource来完成这些工作。