質問編集履歴
3
実現したいことを更新しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
vue.jsでdata.jsonを読み込みます。data.jsonデータにある都道府県をフォームで選ぶと、その都道府県の人の名前一覧が表示され、名前をどれか選ぶと、その名前の人のコメントが見えるものを作ろうとしています。
|
|
3
|
-
- 名前2を選ぶと名前2の人の名前と、名前2の人のコメントだけが表示されるようにしたいです。現在は全てが表示されてしまいます。
|
|
3
|
+
- 名前2を選ぶと名前2の人の名前と、名前2の人のコメントだけが表示されるようにしたいです。現在は全てが表示されてしまうのと、どの名前をクリックしても、idが1の人の情報が出てきてしまいます。
|
|
4
4
|
|
|
5
5
|
### 該当のソースコード
|
|
6
6
|
|
2
コメントを修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
vue.jsでdata.jsonを読み込みます。data.jsonデータにある都道府県をフォームで選ぶと、その都道府県の人の名前一覧が表示され、名前をどれか選ぶと、その名前の人のコメントが見えるものを作ろうとしています。
|
|
3
|
-
|
|
4
|
-
### 前提
|
|
5
|
-
最初は都道府県一覧はなんとか表示できていたのですが、
|
|
6
|
-
名前を
|
|
3
|
+
- 名前2を選ぶと名前2の人の名前と、名前2の人のコメントだけが表示されるようにしたいです。現在は全てが表示されてしまいます。
|
|
7
|
-
触っているうちに訳が分からなくなってきてしまいました、、
|
|
8
|
-
デバッグの方法などもこれから勉強しようとしています。
|
|
9
|
-
アドバイスをいただけると助かります。
|
|
10
4
|
|
|
11
5
|
### 該当のソースコード
|
|
12
6
|
|
1
app.jsを修正し、index.htmlだけにしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,13 +20,14 @@
|
|
|
20
20
|
data: {
|
|
21
21
|
prefectures: [],
|
|
22
22
|
selectedPrefecture: null,
|
|
23
|
-
selectedTitles:
|
|
23
|
+
selectedTitles: [],
|
|
24
24
|
selectedTitle: {},
|
|
25
25
|
comment: [],
|
|
26
26
|
},
|
|
27
27
|
mounted() {
|
|
28
28
|
axios.get('data.json')
|
|
29
29
|
.then(response => {
|
|
30
|
+
console.log(response.data);
|
|
30
31
|
this.comment = response.data;
|
|
31
32
|
this.prefectures = [...new Set(this.comment.map(item => item.prefecture))];
|
|
32
33
|
})
|
|
@@ -37,9 +38,8 @@
|
|
|
37
38
|
methods: {
|
|
38
39
|
changePrefecture(prefecture) {
|
|
39
40
|
this.selectedPrefecture = prefecture;
|
|
40
|
-
this.selectedTitles = [];
|
|
41
|
-
this.selectedTitle = null;
|
|
42
41
|
this.selectedTitles = this.comment.filter(item => item.prefecture === prefecture);
|
|
42
|
+
this.selectedTitle = {};
|
|
43
43
|
},
|
|
44
44
|
selectTitle(title) {
|
|
45
45
|
console.log(title)
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
},
|
|
50
50
|
});
|
|
51
|
+
```
|
|
51
52
|
|
|
52
53
|
```index.html
|
|
53
54
|
<!DOCTYPE html>
|
|
@@ -95,45 +96,6 @@
|
|
|
95
96
|
|
|
96
97
|
```
|
|
97
98
|
|
|
98
|
-
```detail.html
|
|
99
|
-
<!DOCTYPE html>
|
|
100
|
-
<html>
|
|
101
|
-
<head>
|
|
102
|
-
<meta charset="utf-8">
|
|
103
|
-
<title>Vue.js Sample</title>
|
|
104
|
-
</head>
|
|
105
|
-
<body>
|
|
106
|
-
<div id="app">
|
|
107
|
-
<h1>{{ selectedTitle.name }}</h1>
|
|
108
|
-
<h2>コメント</h2>
|
|
109
|
-
<p>{{ selectedTitle.comment }}</p>
|
|
110
|
-
</div>
|
|
111
|
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
112
|
-
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
113
|
-
<script>
|
|
114
|
-
const app = new Vue({
|
|
115
|
-
el: '#app',
|
|
116
|
-
data: {
|
|
117
|
-
selectedTitle: {},
|
|
118
|
-
},
|
|
119
|
-
mounted() {
|
|
120
|
-
const params = new URLSearchParams(window.location.search);
|
|
121
|
-
const id = params.get('id');
|
|
122
|
-
axios.get('data.json?id=${id}')
|
|
123
|
-
.then(response => {
|
|
124
|
-
const data = response.data;
|
|
125
|
-
this.selectedTitle = data.filter(item => item.id == id)[0];
|
|
126
|
-
})
|
|
127
|
-
.catch(error => {
|
|
128
|
-
console.log(error);
|
|
129
|
-
});
|
|
130
|
-
},
|
|
131
|
-
});
|
|
132
|
-
</script>
|
|
133
|
-
</body>
|
|
134
|
-
</html>
|
|
135
|
-
```
|
|
136
99
|
|
|
137
100
|
|
|
138
101
|
|
|
139
|
-
|