実現したいこと
vue.jsでdata.jsonを読み込みます。data.jsonデータにある都道府県をフォームで選ぶと、その都道府県の人の名前一覧が表示され、名前をどれか選ぶと、その名前の人のコメントが見えるものを作ろうとしています。
- 名前2を選ぶと名前2の人の名前と、名前2の人のコメントだけが表示されるようにしたいです。現在は全てが表示されてしまうのと、どの名前をクリックしても、idが1の人の情報が出てきてしまいます。
該当のソースコード
data.json
1[{"id": "1", "name": "名前1", "prefecture": "北海道", "comment": "コメント"}, {"id": "2", "name": "名前2", "prefecture": "沖縄", "comment": "コメント2"},{"id": "3", "name": "名前3", "prefecture": "北海道", "comment": "コメント3"}, {"id": "4", "name": "名前4", "prefecture": "沖縄", "comment": "コメント4"},{"id": "5", "name": "名前5", "prefecture": "神奈川", "comment": "コメント5"}, {"id": "6", "name": "名前6", "prefecture": "沖縄", "comment": "コメント6"}]
app.js
1const app = new Vue({ 2 el: '#app', 3 data: { 4 prefectures: [], 5 selectedPrefecture: null, 6 selectedTitles: [], 7 selectedTitle: {}, 8 comment: [], 9 }, 10 mounted() { 11 axios.get('data.json') 12 .then(response => { 13 console.log(response.data); 14 this.comment = response.data; 15 this.prefectures = [...new Set(this.comment.map(item => item.prefecture))]; 16 }) 17 .catch(error => { 18 console.log(error); 19 }); 20 }, 21 methods: { 22 changePrefecture(prefecture) { 23 this.selectedPrefecture = prefecture; 24 this.selectedTitles = this.comment.filter(item => item.prefecture === prefecture); 25 this.selectedTitle = {}; 26 }, 27 selectTitle(title) { 28 console.log(title) 29 this.selectedTitle = this.comment.find(item => item.id === title.id); 30 //window.location.href = `detail.html?id=${title.id}`; 31 }, 32 }, 33});
index.html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Vue.js Sample</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 8 9</head> 10<body> 11 <div id="app"> 12 <h1>都道府県一覧</h1> 13 <p>都道府県をお選びください</p> 14 <form> 15 <select v-model="selectedPrefecture" @change="changePrefecture($event.target.value)"> 16 <option v-for="prefecture in prefectures" :value="prefecture">{{ prefecture }}</option> 17 </select> 18 </form> 19 20 <div v-if="selectedTitles && selectedTitles.length > 0"> 21 <h2>{{ selectedPrefecture }}の参加者一覧</h2> 22 <ul> 23 <li v-for="title in selectedTitles" :key="title.id"> 24 <!-- <a :href="'detail.html?id=' + title.id">{{ title.name }}</a> --> 25 <a @click="selectTitle(title)">{{ title.name }}</a> 26 <p>{{ title.id }}</p> 27 </li> 28 </ul> 29 </div> 30 31 <div v-if="selectedTitle && Object.keys(selectedTitle).length > 0"> 32 <p>test</p> 33 <h2>{{ selectedTitle.name }}</h2> 34 <div> 35 {{ selectedTitle.comment }} 36 </div> 37 </div> 38 39 </div> 40 <script src="app.js"></script> 41</body> 42</html> 43
0 コメント