回答編集履歴

3

fix typo

2017/02/10 04:48

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -298,7 +298,7 @@
298
298
 
299
299
  dataType: 'json',
300
300
 
301
- url: 'samole.json',
301
+ url: 'sample.json',
302
302
 
303
303
  cache: false
304
304
 

2

要件達成まで加筆

2017/02/10 04:48

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -139,3 +139,221 @@
139
139
  });
140
140
 
141
141
  ```
142
+
143
+
144
+
145
+ ## 第二段階
146
+
147
+ JSONファイルを作成して別ファイル化します。
148
+
149
+ JSONデータはキーと文字列を全てダブルクォート`"`で囲います(真偽値と数値は囲わないこと)。
150
+
151
+ JSONのフォーマットに合わせて、余計なセミコロンとカンマを削除するのを忘れずに。
152
+
153
+
154
+
155
+ ```json
156
+
157
+ [{
158
+
159
+ "finished": false, ←キーを""で囲う
160
+
161
+ "name": "test1" ←文字列を""で囲う
162
+
163
+ }, {
164
+
165
+ "finished": false,
166
+
167
+ "name": "test2"
168
+
169
+ }, {
170
+
171
+ "finished": false,
172
+
173
+ "name": "test3"
174
+
175
+ }] ← 最後のカンマ、セミコロンは取る
176
+
177
+ ```
178
+
179
+
180
+
181
+ ## 第三段階
182
+
183
+ beforeCreate関数を使い、tasksにajaxで取得したデータを挿入します。
184
+
185
+ 一旦これでうまくいきました。
186
+
187
+
188
+
189
+ ```javascript
190
+
191
+ var FormComponent = {
192
+
193
+ template: `<form v-on:submit.prevent="form_submit">
194
+
195
+ <div>
196
+
197
+ <input v-model="task.name" type="text">
198
+
199
+ <span>
200
+
201
+ <button class="btn btn-primary">追加</button>
202
+
203
+ </span>
204
+
205
+ </div>
206
+
207
+ </form>`,
208
+
209
+ props: [
210
+
211
+ 'task',
212
+
213
+ 'on-submit',
214
+
215
+ ],
216
+
217
+ methods: {
218
+
219
+ form_submit: function(event) {
220
+
221
+ if (!this.task.name) {
222
+
223
+ return;
224
+
225
+ }
226
+
227
+ this.onSubmit(event, this.task);
228
+
229
+ },
230
+
231
+ },
232
+
233
+ };
234
+
235
+
236
+
237
+ var ItemComponent = {
238
+
239
+ template: `<label class="list-group-item">
240
+
241
+ <span v-on:click.prevent="edit_click" class="pull-right btn btn-success">編集</span>
242
+
243
+ <input v-model="task.finished" type="checkbox">
244
+
245
+ {{task.name}}
246
+
247
+ </label>`,
248
+
249
+ props: [
250
+
251
+ 'task',
252
+
253
+ ],
254
+
255
+ methods: {
256
+
257
+ edit_click: function(event) {
258
+
259
+ var newName = window.prompt('Task Name', this.task.name);
260
+
261
+ this.task.name = newName;
262
+
263
+ },
264
+
265
+ },
266
+
267
+ };
268
+
269
+
270
+
271
+ window.app = new Vue({
272
+
273
+ el: '#app',
274
+
275
+ components: {
276
+
277
+ 'form_component': FormComponent,
278
+
279
+ 'item_component': ItemComponent,
280
+
281
+ },
282
+
283
+ beforeCreate: function() {
284
+
285
+ /* ajax関数内でthis.tasksにアクセスするため
286
+
287
+ thisをキャッシュする。
288
+
289
+ */
290
+
291
+ var _self = this;
292
+
293
+
294
+
295
+ $.ajax({
296
+
297
+ type: 'GET',
298
+
299
+ dataType: 'json',
300
+
301
+ url: 'samole.json',
302
+
303
+ cache: false
304
+
305
+ }).done(function(data) {
306
+
307
+ // tasksにデータを挿入
308
+
309
+ _self.tasks = data;
310
+
311
+ });
312
+
313
+ },
314
+
315
+ data: {
316
+
317
+ newTask: {
318
+
319
+ finished: false,
320
+
321
+ name: ''
322
+
323
+ },
324
+
325
+ tasks: [] // 初期値として空を定義
326
+
327
+ },
328
+
329
+ methods: {
330
+
331
+ newTask_submit: function(event) {
332
+
333
+ this.tasks.unshift(this.newTask);
334
+
335
+ this.newTask = {
336
+
337
+ finished: false,
338
+
339
+ name: ''
340
+
341
+ };
342
+
343
+ },
344
+
345
+
346
+
347
+ delete_click: function(event) {
348
+
349
+ this.tasks = this.tasks.filter(v => !v.finished);
350
+
351
+ },
352
+
353
+ },
354
+
355
+ });
356
+
357
+
358
+
359
+ ```

1

一段階目を加筆

2017/02/10 04:44

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -39,3 +39,103 @@
39
39
  console.log(nameList); // ["test1", "test2", "test3"]
40
40
 
41
41
  ```
42
+
43
+
44
+
45
+ # 段階的に考える
46
+
47
+ まずこれで動くことを確認します。
48
+
49
+ この形だと、`json_data_finished_name`の値を上手く取得できさえすれば、動く形になっています。
50
+
51
+
52
+
53
+ ## 第一段階
54
+
55
+
56
+
57
+ ```javascript
58
+
59
+ var json_data_finished_name = [{
60
+
61
+ finished: false,
62
+
63
+ name: 'test1'
64
+
65
+ }, {
66
+
67
+ finished: false,
68
+
69
+ name: 'test2'
70
+
71
+ }, {
72
+
73
+ finished: false,
74
+
75
+ name: 'test3'
76
+
77
+ }, ];
78
+
79
+
80
+
81
+ window.app = new Vue({
82
+
83
+ el: '#app',
84
+
85
+ components: {
86
+
87
+ 'form_component': FormComponent,
88
+
89
+ 'item_component': ItemComponent,
90
+
91
+ },
92
+
93
+ created: function() {
94
+
95
+
96
+
97
+ },
98
+
99
+ data: {
100
+
101
+ newTask: {
102
+
103
+ finished: false,
104
+
105
+ name: ''
106
+
107
+ },
108
+
109
+ tasks: json_data_finished_name
110
+
111
+ },
112
+
113
+ methods: {
114
+
115
+ newTask_submit: function(event) {
116
+
117
+ this.tasks.unshift(this.newTask);
118
+
119
+ this.newTask = {
120
+
121
+ finished: false,
122
+
123
+ name: ''
124
+
125
+ };
126
+
127
+ },
128
+
129
+
130
+
131
+ delete_click: function(event) {
132
+
133
+ this.tasks = this.tasks.filter(v => !v.finished);
134
+
135
+ },
136
+
137
+ },
138
+
139
+ });
140
+
141
+ ```