山の検索

vue3を使用して、検索機能の実装のサンプルコードです。

by komame

HTML

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登山検索</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- axiosのライブラリ -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- cssライブラリ -->
    <link rel="stylesheet" href="https://newcss.net/new.min.css">
  </head>

  <body>
    <div id="app">
      <table>
        <tr>
          <th>地域</th>
          <td>
            <label v-for="(area, index) in area" :key="area" style="margin-right: 15px;">
              <input v-model="selectedArea" name="keyword" type="checkbox" :value="area.label">
              {{area.label}}
            </label>
          </td>
        </tr>
        <tr>
          <th>都道府県</th>
          <td>
            <select v-model="selectedPrefecture" style="width: 100%;">
              <option value="" selected>都道府県で絞りこむ</option>
              <template v-for="(prefecture, index) in prefecture" :key="prefecture">
                <optgroup :label="prefecture.area">
                  <template v-for="(name, index) in prefecture.name" :key="name">
                    <option :value="name">{{name}}</option>
                  </template>
                </optgroup>
              </template>
            </select>
          </td>
        </tr>
        <tr>
          <th valign="middle">キーワード</th>
          <td>
            <input name="keyword_search" maxlength="80" type="text" v-model="searchKeywords">
          </td>
        </tr>
      </table>
      <div class="" style="margin-bottom: 50px;"><a @click="resetSearch()">検索内容をリセットする</a></div>

      <div>ヒットした数：{{filterItems.length}}</div>
      <ul class="checkedArea">
        <li v-for="(item, index) in filterItems" :key="item.id">
          <h4>名前：{{item.name}} ({{item.kana}})</h4>
          <div>エリア：{{item.area}}</div>
         ...

JavaScript

const search = Vue.createApp({
  // dataは初期値。動的なものを入れられない
  data() {
    return {
      // fiddle上では、jsonデータをここに入れています。
      records: [{
          "id": 1,
          "name": "利尻山",
          "kana": "りしりざん",
          "area": [
            "北海道"
          ],
          "prefecture": [
            "北海道"
          ]
        },
        {
          "id": 2,
          "name": "蔵王山",
          "kana": "ざおうさん",
          "area": [
            "東北"
          ],
          "prefecture": [
            "福島県", "山形県"
          ]
        },
        {
          "id": 3,
          "name": "那須岳",
          "kana": "なすだけ",
          "area": [
            "東北", "関東"
          ],
          "prefecture": [
            "福島県", "栃木県"
          ]
        },
        {
          "id": 4,
          "name": "平ヶ岳",
          "kana": "ひらがだけ",
          "area": [
            "関東"
          ],
          "prefecture": [
            "新潟県",
            "群馬県"
          ]
        },
        {
          "id": 5,
          "name": "雲取山",
          "kana": "くもとりやま",
          "area": [
            "関東"
          ],
          "prefecture": [
            "東京都",
            "埼玉県"
          ]
        },
        {
          "id": 6,
          "name": "白馬岳",
          "kana": "しろうまだけ",
          "area": [
            "中部"
          ],
          "prefecture": [
            "富山県",
            "長野県"
          ]
        },
        {
          "id": 7,
          "name": "剱岳",
          "kana": "つるぎだけ",
          "area": [
            "中部"
          ],
          "prefecture": [
            "富山県"
          ]
        },
        {
          "id": 8,
          "name": "槍ヶ岳",
          "kana": "やりがたけ",
          "area": [
            "中部"
          ],
          "prefecture": [
            "長野県",
            "岐阜県"
          ]
        },
        {
          "id": 9,
          "name": "大台ヶ原",
          "kana": "おおだいがはら",
          "area": [
            "近畿"
          ],
          "prefecture": [
            "奈良県",
         ...