前提・実現したいこと
現在、Vue.jsとjsonを用いて自分で1からWebアプリ(SPA)を作る練習をしています。
実装したい機能:会社の従業員情報を登録し、検索バーに該当する名前を入力すると該当する文字列を持つ従業員の登録情報を表示する
発生している問題・エラーメッセージ
エラーが出ているわけではないのですが、本来検索バーに文字列を入れて検索するとその文字列を含む名前の従業員情報を表示したいのですが、現在は従業員全員の情報が表示されてしまいます。
該当のソースコード
html
1 <div class="info-worker" v-for="worker in workers" v-bind:key="worker.id"> 2 <h1>{{ worker.name }} さんの登録情報</h1> 3 <table class="table"> 4 <thead class="thead-dark"> 5 <tr> 6 <th>ID</th> 7 <th>名前</th> 8 <th>性別</th> 9 <th>年齢</th> 10 <th>雇用形態</th> 11 <th>住所</th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr v-for="worker in workers"> 16 <td>{{ worker.id }}</td> 17 <td>{{ worker.name }}</td> 18 <td>{{ worker.gender }}</td> 19 <td>{{ worker.age }}</td> 20 <td>{{ worker.position }}</td> 21 <td>{{ worker.address}}</td> 22 </tr> 23 </tbody> 24 <thead class="thead-dark"> 25 <tr> 26 <th>電話番号</th> 27 <th>緊急連絡先</th> 28 <th>銀行名</th> 29 <th>支店名</th> 30 <th>口座番号</th> 31 <th>備考</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr v-for="worker in workers"> 36 <td>{{ worker.number }}</td> 37 <td>{{ worker.emergencynumber }}</td> 38 <td>{{ worker.bankname }}</td> 39 <td>{{ worker.branchname }}</td> 40 <td>{{ worker.banknumber }}</td> 41 <td>{{ worker.additional}}</td> 42 </tr> 43 </tbody> 44 <br><br> 45 </table> 46 </div>
js
1function Main() { 2 workersApp = new Vue({ 3 el: "#workersApp", 4 data: { 5 inputSearch: "", //検索バーの入力テキスト 6 inputName: "", //名前 7 inputGender: "", //性別 8 inputAge: "", //年齢 9 inputPosition: "", //雇用形態 10 inputNumber: "", //電話番号 11 inputEmergencyNumber: "", //緊急連絡先 12 inputPostalcode: "", //郵便番号 13 inputAddress: "", //住所 14 inputBankName: "", //銀行名 15 inputBranchName: "", //支店名 16 inputBankAccount: "", //口座種別 17 inputBankNumber: "", //口座番号 18 inputAdditional: "", //特記事項 19 workers: [] 20 }, 21 created: function() { 22 getInfo(); 23 }, 24 methods: { 25 searchWorkersByName: function(event) {//ここら辺の記述が間違ってると予想 26 let url = "?name_like=" + this.inputSearch; 27 url = baseURL + encodeURI(url); 28 getInfo(url); 29 }, 30 sendInfo: function(event) { 31 let url = baseURL; 32 postInfo(); 33 } 34 } 35 }); 36} 37 38function getInfo(event) { 39 let url = baseURL; 40 fetch(url, { 41 method: 'GET' 42 }).then(function(response) { 43 return response.json(); 44 }).then(function(res) { 45 if (Array.isArray(res)) { 46 workersApp.workers = res; 47 } else { 48 workersApp.workers = [res]; 49 } 50 }) 51} 52
json
1{ 2 "workers": [ 3 { 4 "id": 1, 5 "name": "山田太郎", 6 "gender": "男性", 7 "age": "20", 8 "position": "社長", 9 "address": "東京", 10 "number": "090912341234", 11 "emergencynumber": "08012341234", 12 "bankname": "みすぽ銀行", 13 "branchname": "ほげほげ支店", 14 "bankaccount": "普通預金", 15 "banknumber": "123456789", 16 "additional": "これは社長のダミーデータです" 17 }, 18 { 19 "name": "葛飾北斎", 20 "gender": "男性", 21 "age": "21", 22 "position": "正社員", 23 "address": "神奈川", 24 "number": "07012341234", 25 "emergencynumber": "06012341234", 26 "bankname": "いなか銀行", 27 "branchname": "へきち支店", 28 "bankaccount": "普通預金", 29 "banknumber": "1234567", 30 "additional": "これは概要サンプルこれは概要サンプル", 31 "id": 2 32 } 33 ] 34}
試したこと
Vue.jsの記述が間違っていると予想し、Google検索やteratailにて他の方の質問などを探しました。しかし同様のものを見つけられず(知識不足で有用な回答を見逃しているかもしれませんが....)、こちらにて質問させていただきました。
初心者で至らない点が多いですが、どうかご教授お願いいたします。
また不足情報があればすぐに追記いたします。
補足情報(FW/ツールのバージョンなど)
Vue.jsのバージョン : 2.6.11
Bootstrapのバージョン : 4.5.0
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/01 09:07
2020/08/01 09:14
2020/08/01 09:49 編集