Q&A
Codesandbox を利用すれば、省略せずに全文記載できるかも知れません (URL を共有する) : https://codesandbox.io/s/vue
前提・実現したいこと
vue.js、bootstrap、jsonを使用して自作サイト（スマートフォン版）を作成しています。
＜サイト内容＞
inputタグのテキスト入力、Selectタグ（見頃、花の名前、場所）のoptionタグのアイテムを選択し、検索ボタンをクリックすると、自作のjsonデータから条件に一致したものを表示させるというものです。
＜実現したいこと＞
１度検索したアイテムが再検索時にも引き継がれてしまうため、検索毎に、以前の検索結果をリセットして表示させないようにしたいです。
試したこと
リセット専用ボタンを作成する方法はあったのですが、サイト的にこれ以上ボタンを増やしたくないと考えております。
他に方法がありましたら、アドバイス頂けると幸いです。よろしくお願いしますm(__)m
該当のソースコード（文字数制限があるため、一部省略）
html
1 2</html><!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 10 11 <title>花ナビ</title> 12</head> 13 14<body> 15 <div id="flower"> 16 <!-- 検索フォーム --> 17 <section class="search-box container"> 18 <div class="row"> 19 <div class="form-group col-4"> 20 <label for="exampleFormControlSelect1">見頃</label> 21 <select class="form-control" id="exampleFormControlSelect1" v-model="searchParams.season"> 22 <option value="0">すべて</option> 23 <option value="spring">春の花</option> 24 <option value="summer">夏の花</option> 25 <option value="fall">秋の花</option> 26 <option value="winter">冬の花</option> 27 </select> 28 </div> 29 <div class="form-group col-4"> 30 <label for="exampleFormControlSelect1">花の名前</label> 31 <select class="form-control" id="exampleFormControlSelect1" v-model="searchParams.flowerId"> 32 <option value="0">すべて</option> 33 <option value="1">サクラ</option> 34 <option value="2">ネモフィラ</option> 35 </select> 36 </div> 37 <div class="form-group col-4"> 38 <label for="exampleFormControlSelect1">場所</label> 39 <select class="form-control" id="exampleFormControlSelect1" v-model="searchParams.place"> 40 <option value="0">すべて</option> 41 <option value="1">北海道</option> 42 <option value="2">東北</option> 43 </select> 44 </div> 45 </div> 46 <input class="form-control" v-model="searchParams.freeword" type="text" placeholder="フリーワード"> 47 <div class="py-3"> 48 <button class="btn btn-success btn-block" @click="searchSpot()">この条件で検索</button> 49 </div> 50 </section> 51 52 <!-- 架空DOM生成（季節の花/見頃） --> 53 <section class="flower-item py-2 px-2"> 54 <div class="flower-ttl container mb-3" v-for="season in seasonDatas" v-bind:key="season.id"> 55 <div class="row text-center pt-2"> 56 <h1 class="col-7 h5" v-bind:name="season.name">{{ season.name }}</h1> 57 <p class="flower-season col-5 p-1 small" v-bind:flowering="season.flowering">{{ season.flowering }}</p> 58 </div> 59 <div class="flower-txt d-flex flex-row"> 60 <p class="small" v-bind:desc="season.desc">{{ season.desc }}</p> 61 <img class="ml-2" v-bind:src="season.imgSrc" v-bind:alt="season.name"> 62 </div> 63 </div> 64 </section> 65 66 <!-- 架空DOM生成（花の名前） --> 67 <section class="flower-item py-2 px-2"> 68 <div class="flower-ttl container mb-3" v-for="item in itemDatas" v-bind:key="item.id"> 69 <div class="row text-center pt-2"> 70 <h1 class="col-7 h5" v-bind:name="item.name">{{ item.name }}</h1> 71 <p class="flower-season col-5 p-1 small" v-bind:flowering="item.flowering">{{ item.flowering }}</p> 72 </div> 73 <div class="flower-txt d-flex flex-row"> 74 <p class="small" v-bind:desc="item.desc">{{ item.desc }}</p> 75 <img class="ml-2" v-bind:src="item.imgSrc" v-bind:alt="item.name"> 76 </div> 77 </div> 78 </section> 79 80 <!-- 架空DOM生成（フリーワード） --> 81 <section class="flower-item py-2 px-2"> 82 <div class="flower-ttl container mb-3" v-for="item in itemWordDatas" v-bind:key="item.id"> 83 <div class="row text-center pt-2"> 84 <h1 class="col-7 h5" v-bind:name="item.name">{{ item.name }}</h1> 85 <p class="flower-season col-5 p-1 small" v-bind:flowering="item.flowering">{{ item.flowering }}</p> 86 </div> 87 <div class="flower-txt d-flex flex-row"> 88 <p class="small" v-bind:desc="item.desc">{{ item.desc }}</p> 89 <img class="ml-2" v-bind:src="item.imgSrc" v-bind:alt="item.name"> 90 </div> 91 </div> 92 </section> 93 94 <!-- 架空DOM生成（場所） --> 95 <section class="flowerSpot container p-4" v-for="spot in spotDatas" v-bind:key="spot.id"> 96 <!-- カルーセル作成 --> 97 <div id="example-3" class="carousel slide" data-ride="false" style="width:400px"> 98 <ol class="carousel-indicators"> 99 <li data-target="#example-3" data-slide-to="0" class="active"></li> 100 <li data-target="#example-3" data-slide-to="1"></li> 101 <li data-target="#example-3" data-slide-to="2"></li> 102 </ol> 103 <div class="carousel-inner"> 104 <div class="carousel-item active"> 105 <img v-bind:src="spot.imgSrc_1" v-bind:alt="spot.imgAlt_1" width="330" height="180"> 106 </div> 107 <div class="carousel-item"> 108 <img v-bind:src="spot.imgSrc_2" v-bind:alt="spot.imgAlt_2" width="330" height="180"> 109 </div> 110 <div class="carousel-item"> 111 <img v-bind:src="spot.imgSrc_3" v-bind:alt="spot.imgAlt_3" width="330" height="180"> 112 </div> 113 </div> 114 </div> 115 <div class="flowerSpot-ttl"> 116 <h1 class="mb-0 pt-2 h6">{{ spot.title }}</h1> 117 </div> 118 <div class="flowerSpot-url"> 119 <a v-bind:href="spot.url" target="_blank" class="mb-1">{{ spot.url }}</a> 120 </div> 121 <div class="flowerSpot-access"> 122 <p class="small my-1">{{ spot.access }}</p> 123 </div> 124 <div class="flowerSpot-desc"> 125 <p class="small m-0 pt-2">{{ spot.desc }}</p> 126 </div> 127 </section> 128 129 </div> 130 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 131 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> 132 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 133 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> 134 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 135 <script src="js/main.js"></script> 136</body> 137 138</html>
js
1new Vue({ 2 el: "#flower", 3 data: { 4 searchParams: { 5 season: '0', 6 flowerId: '0', 7 place: '0', 8 freeword: null, 9 }, 10 seasonDatas: [], 11 itemDatas: [], 12 spotDatas: [], 13 itemWordDatas: [], 14 }, 15 16 methods: { 17 // 検索ボタンクリック時に作動 18 searchSpot() { 19 // 「フリーワード（item.json用）」での検索表示 20 $.getJSON("json/item.json", (data) => { 21 22 const result = data.filter((v) => { 23 return v.name.includes(this.searchParams.freeword); 24 }); 25 this.itemWordDatas = result; 26 }); 27 28 // 「季節の花」と「見頃」での検索表示 29 $.getJSON("json/item.json", (data) => { 30 31 const result = data.filter((v) => { 32 return v.season === this.searchParams.season; 33 }); 34 this.seasonDatas = result; 35 }); 36 37 // 「花の名前」での検索表示 38 $.getJSON("json/item.json", (data) => { 39 40 const result = data.filter((v) => { 41 return v.id === Number(this.searchParams.flowerId); 42 }); 43 this.itemDatas = result; 44 }); 45 }, 46 }, 47}); 48
itemJson
1[ 2 { 3 "id": 1, 4 "name": "サクラ", 5 "season": "spring", 6 "flowering": "3月上旬〜4月下旬", 7 "desc": "サクラは卒業から入学の時期に咲く、日本の春を代表する樹木です。", 8 "imgSrc": "images/flower_item/img_01.jpg" 9 }, 10 { 11 "id": 2, 12 "name": "ネモフィラ", 13 "flowering": "４月上旬〜５月中旬", 14 "season": "spring", 15 "desc": "ネモフィラは森の妖精のような、澄んだブルーの花", 16 "imgSrc": "images/flower_item/img_02.jpg" 17 } 18]
spotjson
1[ 2 { 3 "id": 1, 4 "name": "北海道", 5 "imgSrc_1": "images/flower_spot/img_01-1.jpg", 6 "imgSrc_2": "images/flower_spot/img_01-2.jpg", 7 "imgSrc_3": "images/flower_spot/img_01-3.jpg", 8 "imgAlt_1": "森のラベンダー畑", 9 "imgAlt_2": "彩りの畑", 10 "imgAlt_3": "花人の畑", 11 "title": "ファーム富田", 12 "url": "https://www.farm-tomita.co.jp", 13 "access": "〒071-0704 北海道空知郡中富良野町基線北１５", 14 "desc": "ラベンダーが織りなすグラデーションが魅力的な花畑。" 15 }, 16 { 17 "id": 2, 18 "name": "東北", 19 "imgSrc_1": "images/flower_spot/img_02-1.jpg", 20 "imgSrc_2": "images/flower_spot/img_02-2.jpg", 21 "imgSrc_3": "images/flower_spot/img_02-3.jpg", 22 "imgAlt_1": "アジサイロード", 23 "imgAlt_2": "アジサイ池", 24 "imgAlt_3": "アジサイ畑", 25 "title": "みちのくあじさい園", 26 "url": "https://www.ichitabi.jp/spot/data.php?p=36", 27 "access": "〒021-0221 岩手県一関市舞川原沢111", 28 "desc": "山あじさいをメインとした全国的にも珍しい「みちのくあじさい園」。" 29 } 30] 31
アドバイスありがとうございます！
先程、Codesandboxについて調べてみました。いろいろな機能があり、魅了的でした！使ってみます！！
また、goufさんが仰られた「省略せずに全文記載」についてですが、省略せずに全文記載しないと分かりづらいという意味で合っていますでしょうか？
伝えることを意図せず「隠してしまう」よりは、すべて載せた方がよいと考えました
状況が再現可能であれば 最小限のコードでも構いません (= 質問用に要点を絞ったコード内容にする)
「js/main.js」など、質問本文に情報が無いものが見られたので、その点気になったのです
回答ありがとうございます！
再度、自身の質問内容を確認し、goufさんが仰られたことが理解できました汗、、
先程、修正いたしました。
ご指摘いただき、ありがとうございますm(__)m
すこしコードに目を通しました
気になった点として: なぜ JSON にデータを保存する形式にしているのですか? なにか理由があってのことだとは思いますが...
検索については たとえば Rails, Laravel, Django, Express.js などバックエンド側に任せて ...データベースに保存したデータから検索する... フロント側は検索クエリを投げるだけの... 実装にしたほうがよいのではないでしょうか?
(あるいは Nuxt.js + Firebase などのパターンも考えられるかもしれません)
実は、最近までＴｅｃｈＡｃａｄｅｍｙでフロントエンドコースを受講しており、その最終課題として自身でJSONデータを作成し、検索機能を駆使したサイト作成に取り組んでいました。
goufさんが仰るとおり、他に適切な方法がいくつもあるとは思うのですが、まずは学んだ言語でサイトを完成させたいと思い、試行錯誤していた次第です汗
これはアドバイスでもなんでもなく 感想なのですが; たとえば 次のようにコンポーネント分けされてると、コードの見通しがよくなるのかな、と思いました。 : https://codesandbox.io/s/awesome-moore-0dfsz?file=/src/App.vue (※検索機能は動きません)
(コンポーネント分けした上で、動作に無理が生じれば 自然と設計の失敗だと見做せるので やって損はないとも思いました)
ご丁寧にありがとうございます。
先程、確認いたしました。vueでサイト作成してるって感じで、まさに理想の形です！
今の自分には、まだ理解できない所が多々ありますが、検索機能を正常に作動させることを短期の目標として今後も取り組んでいきたいと強く思えました！
goufさん。親切に教えていただきありがとうございました！感謝していますm(__)m
あなたの回答
tips
プレビュー
