Skip to content

Commit 5d061b7

Browse files
keepfoolkeepfool
committed
fix the delete bug of vue components part-2
1 parent 2d161a8 commit 5d061b7

File tree

16 files changed

+13849
-56
lines changed

16 files changed

+13849
-56
lines changed

‎02.Components/Part-2/demo/step01.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
{{entry[col.name]}}
5050
</td>
5151
<td class="text-center">
52-
<button class="btn-danger" @click="deleteItem(index)">delete</button>
52+
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
5353
</td>
5454
</tr>
5555
</tbody>
@@ -63,8 +63,15 @@
6363
props: ['dataList', 'columns', 'searchKey'],
6464

6565
methods: {
66-
deleteItem: function(index) {
67-
this.dataList.splice(index, 1);
66+
deleteItem: function(entry) {
67+
68+
var data = this.dataList
69+
data.forEach(function(item, i){
70+
if(item === entry){
71+
data.splice(i, 1)
72+
return
73+
}
74+
})
6875
},
6976
}
7077
})

‎02.Components/Part-2/demo/step02.html

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
* 由于IE不支持<template>标签，所以template标签中的内容在IE下会直接显示出来。
1111
* 将模板设为隐藏即可解决这个问题，template标签各浏览器支持请参考：http://caniuse.com/#feat=template
1212
*/
13-
#grid-template, #dialog-template{
13+
14+
#grid-template,
15+
#dialog-template {
1416
display: none;
1517
}
16-
</style>
18+
</style>
1719
</head>
1820

1921
<body>
@@ -49,7 +51,7 @@
4951
{{entry[col.name]}}
5052
</td>
5153
<td class="text-center">
52-
<button class="btn-danger" @click="deleteItem(index)">delete</button>
54+
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
5355
</td>
5456
</tr>
5557
</tbody>
@@ -90,9 +92,15 @@ <h1 class="dialog-title">{{ title }}</h1>
9092
},
9193
props: ['dataList', 'columns', 'searchKey'],
9294
methods: {
93-
deleteItem: function(index) {
94-
this.dataList.splice(index, 1);
95-
},
95+
deleteItem: function(entry) {
96+
var data = this.dataList
97+
data.forEach(function(item, i) {
98+
if(item === entry) {
99+
data.splice(i, 1)
100+
return
101+
}
102+
})
103+
}
96104
},
97105
components: {
98106
'modal-dialog': {

‎02.Components/Part-2/demo/step03.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
{{entry[col.name]}}
5050
</td>
5151
<td class="text-center">
52-
<button class="btn-danger" @click="deleteItem(index)">delete</button>
52+
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
5353
</td>
5454
</tr>
5555
</tbody>
@@ -124,9 +124,15 @@ <h1 class="dialog-title">{{ title }}</h1>
124124
// 新建完数据后，重置item对象
125125
this.item = {}
126126
},
127-
deleteItem: function(index) {
128-
this.dataList.splice(index, 1);
129-
},
127+
deleteItem: function(entry) {
128+
var data = this.dataList
129+
data.forEach(function(item, i) {
130+
if(item === entry) {
131+
data.splice(i, 1)
132+
return
133+
}
134+
})
135+
}
130136
},
131137
components: {
132138
'modal-dialog': {

‎02.Components/Part-2/demo/step04.html

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
* 由于IE不支持<template>标签，所以template标签中的内容在IE下会直接显示出来。
1111
* 将模板设为隐藏即可解决这个问题，template标签各浏览器支持请参考：http://caniuse.com/#feat=template
1212
*/
13-
#grid-template, #dialog-template{
13+
14+
#grid-template,
15+
#dialog-template {
1416
display: none;
1517
}
1618
</style>
@@ -50,7 +52,7 @@
5052
<span v-else>{{entry[col.name]}}</span>
5153
</td>
5254
<td class="text-center">
53-
<button class="btn-danger" @click="deleteItem(index)">delete</button>
55+
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
5456
</td>
5557
</tr>
5658
</tbody>
@@ -77,7 +79,7 @@ <h1 class="dialog-title">{{ title }}</h1>
7779
<label>{{ field.name }}</label>
7880
<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
7981
<option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
80-
</select>
82+
</select>
8183
<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
8284
</div>
8385
</div>
@@ -108,9 +110,9 @@ <h1 class="dialog-title">{{ title }}</h1>
108110
item: {}
109111
}
110112
},
111-
ready: function(){
112-
for (var i = 0; i < this.columns.length; i++) {
113-
if (this.columns[i].isKey) {
113+
ready: function() {
114+
for(var i = 0; i < this.columns.length; i++) {
115+
if(this.columns[i].isKey) {
114116
this.keyColumn = this.columns[i]['name']
115117
break;
116118
}
@@ -120,35 +122,35 @@ <h1 class="dialog-title">{{ title }}</h1>
120122
openNewItemDialog: function(title) {
121123
// 对话框的标题
122124
this.title = title
123-
// mode = 1表示新建模式
125+
// mode = 1表示新建模式
124126
this.mode = 1
125-
// 初始化this.item
127+
// 初始化this.item
126128
this.item = {}
127-
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
129+
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
128130
this.$broadcast('showDialog', true)
129131
},
130132
openEditItemDialog: function(key) {
131-
133+
132134
// 根据主键查找当前修改的数据
133135
var currentItem = this.findItemByKey(key)
134-
// 对话框的标题
136+
// 对话框的标题
135137
this.title = 'Edit Item - ' + key
136-
// mode = 2表示修改模式
138+
// mode = 2表示修改模式
137139
this.mode = 2
138-
// 初始化this.item
140+
// 初始化this.item
139141
this.item = {}
140-
// 将选中的数据拷贝到this.item
142+
// 将选中的数据拷贝到this.item
141143
this.item = this.initItemForUpdate(currentItem)
142-
// 广播事件，传入参数true表示显示对话框
144+
// 广播事件，传入参数true表示显示对话框
143145
this.$broadcast('showDialog', true)
144146
},
145147
// 弹出修改数据的对话框时，使用对象的深拷贝
146148
initItemForUpdate: function(p) {
147149
var c = c || {};
148-
for (var i in p) {
150+
for(var i in p) {
149151
// 属性i是否为p对象的自有属性
150-
if (p.hasOwnProperty(i)) {
151-
if (typeof p[i] === 'object') {
152+
if(p.hasOwnProperty(i)) {
153+
if(typeof p[i] === 'object') {
152154
c[i] = Array.isArray(p[i]) ? [] : {}
153155
deepCopy(p[i], c[i])
154156
} else {
@@ -159,43 +161,49 @@ <h1 class="dialog-title">{{ title }}</h1>
159161
}
160162
return c;
161163
},
162-
findItemByKey: function(key){
164+
findItemByKey: function(key) {
163165
var keyColumn = this.keyColumn
164-
for(var i = 0; i < this.dataList.length; i++){
165-
if(this.dataList[i][keyColumn] === key){
166+
for(var i = 0; i < this.dataList.length; i++) {
167+
if(this.dataList[i][keyColumn] === key) {
166168
return this.dataList[i]
167169
}
168170
}
169171
},
170172
createItem: function() {
171173
// 将item追加到dataList
172174
this.dataList.push(this.item)
173-
// 广播事件，传入参数false表示隐藏对话框
175+
// 广播事件，传入参数false表示隐藏对话框
174176
this.$broadcast('showDialog', false)
175-
// 新建完数据后，重置item对象
177+
// 新建完数据后，重置item对象
176178
this.item = {}
177179
},
178180
updateItem: function() {
179181
// 获取主键列
180182
var keyColumn = this.keyColumn
181183

182-
for (var i = 0; i < this.dataList.length; i++) {
184+
for(var i = 0; i < this.dataList.length; i++) {
183185
// 根据主键查找要修改的数据，然后将this.item数据更新到this.dataList[i]
184-
if (this.dataList[i][keyColumn] === this.item[keyColumn]) {
185-
for (var j in this.item) {
186+
if(this.dataList[i][keyColumn] === this.item[keyColumn]) {
187+
for(var j in this.item) {
186188
this.dataList[i][j] = this.item[j]
187189
}
188190
break;
189191
}
190192
}
191193
// 广播事件，传入参数false表示隐藏对话框
192194
this.$broadcast('showDialog', false)
193-
// 修改完数据后，重置item对象
195+
// 修改完数据后，重置item对象
194196
this.item = {}
195197
},
196-
deleteItem: function(index) {
197-
this.dataList.splice(index, 1);
198-
},
198+
deleteItem: function(entry) {
199+
var data = this.dataList
200+
data.forEach(function(item, i) {
201+
if(item === entry) {
202+
data.splice(i, 1)
203+
return
204+
}
205+
})
206+
}
199207
},
200208
components: {
201209
'modal-dialog': {
@@ -219,10 +227,10 @@ <h1 class="dialog-title">{{ title }}</h1>
219227
},
220228
save: function() {
221229
//新建模式
222-
if (this.mode === 1) {
230+
if(this.mode === 1) {
223231
// 使用$dispatch调用simple-grid的create-item事件
224232
this.$dispatch('create-item')
225-
} else if (this.mode === 2) {
233+
} else if(this.mode === 2) {
226234
// 使用$dispatch调用simple-grid的update-item事件
227235
this.$dispatch('update-item')
228236
}

‎02.Components/Part-2/demo/step05.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<span v-else>{{entry[col.name]}}</span>
5151
</td>
5252
<td class="text-center">
53-
<button class="btn-danger" @click="deleteItem(index)">delete</button>
53+
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
5454
</td>
5555
</tr>
5656
</tbody>
@@ -204,9 +204,15 @@ <h1 class="dialog-title">{{ title }}</h1>
204204
// 修改完数据后，重置item对象
205205
this.item = {}
206206
},
207-
deleteItem: function(index) {
208-
this.dataList.splice(index, 1);
209-
},
207+
deleteItem: function(entry) {
208+
var data = this.dataList
209+
data.forEach(function(item, i) {
210+
if(item === entry) {
211+
data.splice(i, 1)
212+
return
213+
}
214+
})
215+
}
210216
},
211217
components: {
212218
'modal-dialog': {

‎02.Components/Part-2/demo/step06.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<span v-else>{{entry[col.name]}}</span>
5151
</td>
5252
<td class="text-center">
53-
<button class="btn-danger" @click="deleteItem(index)">delete</button>
53+
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
5454
</td>
5555
</tr>
5656
</tbody>
@@ -241,9 +241,15 @@ <h1 class="dialog-title">{{ title }}</h1>
241241
// 修改完数据后，重置item对象
242242
this.item = {}
243243
},
244-
deleteItem: function(index) {
245-
this.dataList.splice(index, 1);
246-
},
244+
deleteItem: function(entry) {
245+
var data = this.dataList
246+
data.forEach(function(item, i) {
247+
if(item === entry) {
248+
data.splice(i, 1)
249+
return
250+
}
251+
})
252+
}
247253
},
248254
components: {
249255
'modal-dialog': modalDialog

‎03.Ajax/jquery-zepto/account-vue.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,9 @@
9797
el: '#app',
9898
data: {
9999
show: false,
100-
registerUrl: 'http://localhost:64474/api/Account/Register',
101-
loginUrl: 'http://localhost:64474/token',
102-
apiUrl: 'http://localhost:64474/api/values',
100+
registerUrl: 'http://localhost:12345/api/Account/Register',
101+
loginUrl: 'http://localhost:12345/token',
102+
apiUrl: 'http://localhost:12345/api/values',
103103
registerModel: {
104104
email: '',
105105
password: '',

0 commit comments

Comments
 (0)