vue.jsを勉強し始めました。
以下のプログラム内容で質問があります。

window.app = new Vue({
・
・
・
data:{
tasks: [
{ finished: false, name: 'test1' },
{ finished: false, name: 'test2' },
{ finished: false, name: 'test3' },
],
}
と画面表示したいデータが入っています。

しかしこの書き方だと、要素が多くなった時に対応しきれなくなると思います。

そこで、Jsonを利用してdataを管理し、使用したいのですが、記述方法がわからず足が止まってしまいました。

どなたかご指導ご鞭撻いただけないでしょうか？
よろしくお願いいたします。

html
1<!DOCTYPE html>
2
3<html lang="en">
4	<head>
5		<meta charset="UTF-8">
6		<title>Vue TODO</title>
7	</head>
8	<body>
9		<div id="app">
10			<div class="container">
11				<h1>CRUDデモ</h1>
12				<div>
13				    <!--  v-bind は 「:」 で省略できる     <task-form :task="newTask" :on-submit="newTask_submit"></task-form>      -->
14					<form_component v-bind:task="newTask" v-bind:on-submit="newTask_submit"></form_component>
15				<hr />
16					<button v-on:click="delete_click" class="btn btn-danger">削除</button>
17					<item_component v-for="task in tasks" :task="task"></item_component>
18				</div>
19			</div>
20		</div>
21
22		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
23		<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
24		<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"> </script>
25		<script src="js.js"></script>
26	</body>
27</html>
28

javascript
1
2
3json_data_finished_name =[];
4
5var FormComponent = {
6	template:	`<form v-on:submit.prevent="form_submit">
7					<div>
8						<input v-model="task.name"  type="text">
9						<span>
10							<button class="btn btn-primary">追加</button>
11						</span>
12					</div>
13				</form>`,
14	props: [
15		'task',
16		'on-submit',
17	],
18	methods: {
19		form_submit: function(event) {
20			if (!this.task.name) {
21				return;
22			}
23			this.onSubmit(event, this.task);
24		},
25	},
26};
27
28var ItemComponent = {
29	template: ` <label class="list-group-item">
30					<span v-on:click.prevent="edit_click" class="pull-right btn btn-success">編集</span>
31					<input v-model="task.finished" type="checkbox">
32					{{task.name}}
33				</label>`,
34	props: [
35		'task',
36	],
37	methods: {
38		edit_click: function(event) {
39			var newName = window.prompt('Task Name', this.task.name);
40			this.task.name = newName;
41		},
42	},
43};
44
45window.app = new Vue({
46	el: '#app',
47	components: {
48		'form_component': FormComponent,
49		'item_component': ItemComponent,
50	},
51	created:function(){
52        $.ajax({
53				url:"json_data.json",
54				dataType: 'json',
55				cache: false,
56				success: function(data) {
57					console.log("jsonアクセス成功");
58					json_data_finished_name = data;
59					
60					// 追加コメント ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
61					
62					// console.log(json_data_finished_name);   以下中身
63					// object{ finished="false" , name="test1"},
64					// object{ finished="false" , name="test2"},
65					// object{ finished="false" , name="test3"}, ・・・
66					
67					// 読込んだ、Json(object)をtasksに落とし込みたいのですが、方法がわからないといった内容です。
68					// vue.jsというよりjavascriptの質問になるのかもしれません。
69					
70					// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
71					
72				}.bind(this),
73				error: function(xhr, status, error) {
74					console.log("jsonアクセス失敗");
75					console.error(this.props.url, status, error.toString());
76				}.bind(this),
77
78        });
79	},
80	data: {
81		newTask: { finished: false, name: '' },
82		tasks: [
83		    //  追加コメント ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
84		
85			// 自分のイメージはこんな感じです。少し見当違いの回答かもしれません・・・
86			// まずはJsonに登録されているnameをListに出力させたいのです・・・
87		
88		    // 
89			// json_data_finished_name のみ書込ことで、以下に書いたコードと同じ働きになるのではないかと考えておりました。
90			// 
91			
92			// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
93			{ finished: false, name: 'test1' },
94			{ finished: false, name: 'test2' },
95			{ finished: false, name: 'test3' },
96		],
97	},
98	methods: {
99		newTask_submit: function(event) {
100			this.tasks.unshift(this.newTask);
101			this.newTask = { finished: false, name: '' };
102		},
103
104		delete_click: function(event) {
105			this.tasks = this.tasks.filter(v=>!v.finished);
106		},
107	},
108});
109
110

json
1[
2{
3	"finished": "false",
4	"name:": "test1"
5},
6{
7	"finished": "false",
8	"name:": "test2"
9},
10{
11	"finished": "false",
12	"name:": "test3"
13},
14{
15	"finished": "false",
16	"name:": "test4"
17}
18]
19

yamato_hikawa

2017/02/09 06:35 編集

どういう形の配列にしたいのかが見えないので、dataを配列に変換した後の状態を記載して頂けませんか？もう少しわかりやすく書くと変換前 data = [{a: 1, b: 2}, {a: 1, b: 2}]; 変換後 a = [1, 1] のような感じです。

siguma

2017/02/09 06:10

javascriptコード内、追加コメントを書かせて頂きました。こちらでイメージつきますでしょうか・・・

行動規範の内容に同意します

回答1件

ベストアンサー

ひとまず、基本的な配列変換はmapメソッドを使えば簡単にできます。

javascript
1var data = [{
2  finished: false,
3  name: 'test1'
4}, {
5  finished: false,
6  name: 'test2'
7}, {
8  finished: false,
9  name: 'test3'
10}];
11
12// nameの値だけを取り出した配列を作成
13var nameList = data.map(function(obj){
14  return obj.name;
15});
16
17console.log(nameList); // ["test1", "test2", "test3"]

段階的に考える

まずこれで動くことを確認します。
この形だと、json_data_finished_nameの値を上手く取得できさえすれば、動く形になっています。

第一段階

javascript
1var json_data_finished_name = [{
2  finished: false,
3  name: 'test1'
4}, {
5  finished: false,
6  name: 'test2'
7}, {
8  finished: false,
9  name: 'test3'
10}, ];
11
12window.app = new Vue({
13  el: '#app',
14  components: {
15    'form_component': FormComponent,
16    'item_component': ItemComponent,
17  },
18  created: function() {
19
20  },
21  data: {
22    newTask: {
23      finished: false,
24      name: ''
25    },
26    tasks: json_data_finished_name
27  },
28  methods: {
29    newTask_submit: function(event) {
30      this.tasks.unshift(this.newTask);
31      this.newTask = {
32        finished: false,
33        name: ''
34      };
35    },
36
37    delete_click: function(event) {
38      this.tasks = this.tasks.filter(v => !v.finished);
39    },
40  },
41});

第二段階

JSONファイルを作成して別ファイル化します。
JSONデータはキーと文字列を全てダブルクォート"で囲います（真偽値と数値は囲わないこと）。
JSONのフォーマットに合わせて、余計なセミコロンとカンマを削除するのを忘れずに。

json
1[{
2  "finished": false, ←キーを""で囲う
3  "name": "test1" ←文字列を""で囲う
4}, {
5  "finished": false,
6  "name": "test2"
7}, {
8  "finished": false,
9  "name": "test3"
10}] ← 最後のカンマ、セミコロンは取る

第三段階

beforeCreate関数を使い、tasksにajaxで取得したデータを挿入します。
一旦これでうまくいきました。

javascript
1var FormComponent = {
2  template: `<form v-on:submit.prevent="form_submit">
3                    <div>
4                        <input v-model="task.name"  type="text">
5                        <span>
6                            <button class="btn btn-primary">追加</button>
7                        </span>
8                    </div>
9                </form>`,
10  props: [
11    'task',
12    'on-submit',
13  ],
14  methods: {
15    form_submit: function(event) {
16      if (!this.task.name) {
17        return;
18      }
19      this.onSubmit(event, this.task);
20    },
21  },
22};
23
24var ItemComponent = {
25  template: `<label class="list-group-item">
26      <span v-on:click.prevent="edit_click" class="pull-right btn btn-success">編集</span>
27      <input v-model="task.finished" type="checkbox">
28      {{task.name}}
29</label>`,
30  props: [
31    'task',
32  ],
33  methods: {
34    edit_click: function(event) {
35      var newName = window.prompt('Task Name', this.task.name);
36      this.task.name = newName;
37    },
38  },
39};
40
41window.app = new Vue({
42  el: '#app',
43  components: {
44    'form_component': FormComponent,
45    'item_component': ItemComponent,
46  },
47  beforeCreate: function() {
48    /* ajax関数内でthis.tasksにアクセスするため 
49    thisをキャッシュする。
50    */
51    var _self = this;
52
53    $.ajax({
54      type: 'GET',
55      dataType: 'json',
56      url: 'sample.json',
57      cache: false
58    }).done(function(data) {
59      // tasksにデータを挿入
60      _self.tasks = data;
61    });
62  },
63  data: {
64    newTask: {
65      finished: false,
66      name: ''
67    },
68    tasks: [] // 初期値として空を定義
69  },
70  methods: {
71    newTask_submit: function(event) {
72      this.tasks.unshift(this.newTask);
73      this.newTask = {
74        finished: false,
75        name: ''
76      };
77    },
78
79    delete_click: function(event) {
80      this.tasks = this.tasks.filter(v => !v.finished);
81    },
82  },
83});
84

投稿2017/02/09 06:41

編集2017/02/10 04:48

yamato_hikawa

総合スコア2092

siguma

2017/02/09 07:36

お答えありがとうございます。 mapメソッドサンプルありがとうございます。大変わかりやすかったです。ただ少し話がずれてしまったかもしれません・・・申し訳ございません。このテストプログラムですと、html内に書かれた、 <item_component v-for="task in tasks" :task="task"></item_component>でfor文をかけ、 object分の数だけリスト表示する仕様になっていると思います。このリスト表示する際に、jsonデータのリストを使用したいのです。このような方法はありますでしょうか？