質問編集履歴

4

修正

2017/02/09 06:41

投稿

siguma
siguma

スコア14

test CHANGED
File without changes
test CHANGED
@@ -334,27 +334,41 @@
334
334
 
335
335
  ```json
336
336
 
337
+ [
338
+
337
339
  {
338
340
 
339
- "finished": false
341
+ "finished": "false",
340
-
342
+
341
- "name": "test1",
343
+ "name:": "test1"
342
344
 
343
345
  },
344
346
 
345
347
  {
346
348
 
347
- "finished": false
349
+ "finished": "false",
348
-
350
+
349
- "name": "test2",
351
+ "name:": "test2"
350
352
 
351
353
  },
352
354
 
353
-
355
+ {
356
+
354
-
357
+ "finished": "false",
358
+
359
+ "name:": "test3"
360
+
361
+ },
362
+
355
-
363
+ {
364
+
356
-
365
+ "finished": "false",
366
+
367
+ "name:": "test4"
368
+
357
-
369
+ }
370
+
371
+ ]
358
372
 
359
373
 
360
374
 

3

修正

2017/02/09 06:41

投稿

siguma
siguma

スコア14

test CHANGED
File without changes
test CHANGED
@@ -282,11 +282,11 @@
282
282
 
283
283
 
284
284
 
285
- // for(var i = 0; i < json_data_finished_name.length; i++){
286
-
287
- // json_data_finished_name[i]
288
-
289
- // }
285
+ //
286
+
287
+ // json_data_finished_name のみ書込ことで、以下に書いたコードと同じ働きになるのではないかと考えておりました。
288
+
289
+ //
290
290
 
291
291
 
292
292
 

2

修正

2017/02/09 06:26

投稿

siguma
siguma

スコア14

test CHANGED
File without changes
test CHANGED
@@ -260,11 +260,7 @@
260
260
 
261
261
  }.bind(this),
262
262
 
263
- complete: function() {
263
+
264
-
265
- that.isInitialized = true;
266
-
267
- }
268
264
 
269
265
  });
270
266
 

1

プログラム修正

2017/02/09 06:18

投稿

siguma
siguma

スコア14

test CHANGED
File without changes
test CHANGED
@@ -110,212 +110,256 @@
110
110
 
111
111
 
112
112
 
113
+
114
+
113
- var json_data_name = [];
115
+ json_data_finished_name =[];
116
+
117
+
118
+
114
-
119
+ var FormComponent = {
120
+
115
-
121
+ template: `<form v-on:submit.prevent="form_submit">
122
+
116
-
123
+ <div>
124
+
125
+ <input v-model="task.name" type="text">
126
+
127
+ <span>
128
+
129
+ <button class="btn btn-primary">追加</button>
130
+
131
+ </span>
132
+
133
+ </div>
134
+
135
+ </form>`,
136
+
137
+ props: [
138
+
139
+ 'task',
140
+
141
+ 'on-submit',
142
+
143
+ ],
144
+
145
+ methods: {
146
+
147
+ form_submit: function(event) {
148
+
149
+ if (!this.task.name) {
150
+
151
+ return;
152
+
153
+ }
154
+
155
+ this.onSubmit(event, this.task);
156
+
157
+ },
158
+
159
+ },
160
+
161
+ };
162
+
163
+
164
+
165
+ var ItemComponent = {
166
+
167
+ template: ` <label class="list-group-item">
168
+
169
+ <span v-on:click.prevent="edit_click" class="pull-right btn btn-success">編集</span>
170
+
171
+ <input v-model="task.finished" type="checkbox">
172
+
173
+ {{task.name}}
174
+
175
+ </label>`,
176
+
177
+ props: [
178
+
179
+ 'task',
180
+
181
+ ],
182
+
183
+ methods: {
184
+
185
+ edit_click: function(event) {
186
+
187
+ var newName = window.prompt('Task Name', this.task.name);
188
+
189
+ this.task.name = newName;
190
+
191
+ },
192
+
193
+ },
194
+
195
+ };
196
+
197
+
198
+
199
+ window.app = new Vue({
200
+
201
+ el: '#app',
202
+
203
+ components: {
204
+
205
+ 'form_component': FormComponent,
206
+
207
+ 'item_component': ItemComponent,
208
+
209
+ },
210
+
211
+ created:function(){
212
+
213
+ $.ajax({
214
+
215
+ url:"json_data.json",
216
+
217
+ dataType: 'json',
218
+
219
+ cache: false,
220
+
117
- function Ajax_f()
221
+ success: function(data) {
222
+
223
+ console.log("jsonアクセス成功");
224
+
225
+ json_data_finished_name = data;
226
+
227
+
228
+
229
+ // 追加コメント ==============================
230
+
231
+
232
+
233
+ // console.log(json_data_finished_name); 以下中身
234
+
235
+ // object{ finished="false" , name="test1"},
236
+
237
+ // object{ finished="false" , name="test2"},
238
+
239
+ // object{ finished="false" , name="test3"}, ・・・
240
+
241
+
242
+
243
+ // 読込んだ、Json(object)をtasksに落とし込みたいのですが、方法がわからないといった内容です。
244
+
245
+ // vue.jsというよりjavascriptの質問になるのかもしれません。
246
+
247
+
248
+
249
+ // =====================================
250
+
251
+
252
+
253
+ }.bind(this),
254
+
255
+ error: function(xhr, status, error) {
256
+
257
+ console.log("jsonアクセス失敗");
258
+
259
+ console.error(this.props.url, status, error.toString());
260
+
261
+ }.bind(this),
262
+
263
+ complete: function() {
264
+
265
+ that.isInitialized = true;
266
+
267
+ }
268
+
269
+ });
270
+
271
+ },
272
+
273
+ data: {
274
+
275
+ newTask: { finished: false, name: '' },
276
+
277
+ tasks: [
278
+
279
+ // 追加コメント ======================================
280
+
281
+
282
+
283
+ // 自分のイメージはこんな感じです。少し見当違いの回答かもしれません・・・
284
+
285
+ // まずはJsonに登録されているnameをListに出力させたいのです・・・
286
+
287
+
288
+
289
+ // for(var i = 0; i < json_data_finished_name.length; i++){
290
+
291
+ // json_data_finished_name[i]
292
+
293
+ // }
294
+
295
+
296
+
297
+ // ============================================
298
+
299
+ { finished: false, name: 'test1' },
300
+
301
+ { finished: false, name: 'test2' },
302
+
303
+ { finished: false, name: 'test3' },
304
+
305
+ ],
306
+
307
+ },
308
+
309
+ methods: {
310
+
311
+ newTask_submit: function(event) {
312
+
313
+ this.tasks.unshift(this.newTask);
314
+
315
+ this.newTask = { finished: false, name: '' };
316
+
317
+ },
318
+
319
+
320
+
321
+ delete_click: function(event) {
322
+
323
+ this.tasks = this.tasks.filter(v=>!v.finished);
324
+
325
+ },
326
+
327
+ },
328
+
329
+ });
330
+
331
+
332
+
333
+
334
+
335
+ ```
336
+
337
+
338
+
339
+ ```json
118
340
 
119
341
  {
120
342
 
121
- $.ajax({
122
-
123
- url: "json_data.json",
124
-
125
- dataType: 'json',
126
-
127
- cache: false,
128
-
129
- success: function(data) {
130
-
131
- console.log("jsonアクセス成功");
132
-
133
- json_data_name = data;
134
-
135
- console.log(json_data_name);
136
-
137
- }.bind(this),
138
-
139
- error: function(xhr, status, error) {
140
-
141
- console.log("jsonアクセス失敗");
142
-
143
- console.error(this.props.url, status, error.toString());
144
-
145
- }.bind(this)
146
-
147
- });
148
-
149
- };
150
-
151
-
152
-
153
-
154
-
155
- var FormComponent = {
156
-
157
- template: `<form v-on:submit.prevent="form_submit">
158
-
159
- <div>
160
-
161
- <input v-model="task.name" type="text">
162
-
163
- <span>
164
-
165
- <button class="btn btn-primary">追加</button>
166
-
167
- </span>
168
-
169
- </div>
170
-
171
- </form>`,
172
-
173
- props: [
174
-
175
- 'task',
176
-
177
- 'on-submit',
178
-
179
- ],
180
-
181
- methods: {
182
-
183
- form_submit: function(event) {
184
-
185
- if (!this.task.name) {
186
-
187
- return;
188
-
189
- }
190
-
191
- this.onSubmit(event, this.task);
192
-
193
- },
194
-
195
- },
196
-
197
- };
198
-
199
-
200
-
201
- var ItemComponent = {
202
-
203
- template: ` <label class="list-group-item">
204
-
205
- <span v-on:click.prevent="edit_click" class="pull-right btn btn-success">編集</span>
206
-
207
- <input v-model="task.finished" type="checkbox">
208
-
209
- {{task.name}}
210
-
211
- </label>`,
212
-
213
- props: [
214
-
215
- 'task',
216
-
217
- ],
218
-
219
- methods: {
220
-
221
- edit_click: function(event) {
222
-
223
- var newName = window.prompt('Task Name', this.task.name);
224
-
225
- this.task.name = newName;
226
-
227
- },
228
-
229
- },
230
-
231
- };
232
-
233
-
234
-
235
- Ajax_f();
236
-
237
- window.app = new Vue({
238
-
239
- el: '#app',
240
-
241
- components: {
242
-
243
- 'form_component': FormComponent,
244
-
245
- 'item_component': ItemComponent,
246
-
247
- },
248
-
249
- data: {
250
-
251
- newTask: { finished: false, name: '' },
252
-
253
- tasks: [
254
-
255
- //配列にして処理したい
256
-
257
- { finished: false, name: 'test1' },
258
-
259
- { finished: false, name: 'test2' },
260
-
261
- { finished: false, name: 'test3' },
262
-
263
- ],
264
-
265
- },
266
-
267
- methods: {
268
-
269
- newTask_submit: function(event) {
270
-
271
- this.tasks.unshift(this.newTask);
272
-
273
- this.newTask = { finished: false, name: '' };
274
-
275
- },
276
-
277
-
278
-
279
- delete_click: function(event) {
280
-
281
- this.tasks = this.tasks.filter(v=>!v.finished);
282
-
283
- },
284
-
285
- },
286
-
287
- });
343
+ "finished": false
344
+
345
+ "name": "test1",
346
+
347
+ },
348
+
349
+ {
350
+
351
+ "finished": false
352
+
353
+ "name": "test2",
354
+
355
+ },
356
+
357
+
358
+
359
+
360
+
361
+
288
362
 
289
363
 
290
364
 
291
365
  ```
292
-
293
-
294
-
295
- ```json
296
-
297
- {
298
-
299
- "finished": false
300
-
301
- "name": "test1",
302
-
303
- },
304
-
305
- {
306
-
307
- "finished": false
308
-
309
- "name": "test2",
310
-
311
- },
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
- ```