質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1854閲覧

jsonのデータから検索した検索結果を表示したい

Alex_M

総合スコア32

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/08/01 04:03

編集2020/08/01 04:51

前提・実現したいこと

現在、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

同様のサンプルを見つけられず

シンプルに記述されているので、過去に参照させていただきました。

コピペでOK!Vue.jsでリアルタイム検索をつくる方法

投稿2020/08/01 05:35

編集2020/08/01 05:36
mako1972

総合スコア383

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alex_M

2020/08/01 09:07

ありがとうございます!! うまく実装することができました!
mako1972

2020/08/01 09:14

良かったです。回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問