行きたいところマップ　その15

今回進めたこと

・リストの削除（実装）

・キーワードの絞り込み検索のプログラム見直し

・CSSで見た目をいい感じに

■ リストの実装

先週までは削除ボタンは装飾のみで、実装までに至っていませんでした。

今回では、削除ボタンを押すと、見た目・ローカルストレージから削除されるプログラムを追記しました。

<div id="listview" v-for="(d, index) in data" v-if="d.tagName1 == searchedTag || d.tagName2 == searchedTag || d.tagName3 == searchedTag" :key="d.id">
          <div class="list-info">
         	<h1 class="placeName">{{d.placeName}}</h1>
          	<p class="placeAddress">{{d.address}}</p>
          	<span class="tagname">{{d.tagName1}}</span>
         	<span class="tagname">{{d.tagName2}}</span>
          	<span class="tagname">{{d.tagName3}}</span>
          </div>
          
          <p class="removebtn" @click="removeData(index)">削除</p>
            
</div>

removeData: function(index) {
         this.data.splice(index,1);
         localStorage.removeItem('store', JSON.stringify(this.data));
         this.placeName = '';
         this.tagName1 = '';
         this.tagName2 = '';
         this.tagName3 = '';
         this.address = '';
       }

■ キーワードの絞り込み検索のプログラム見直し

前回では、絞り込み検索で3つ以上のキーワードを入力したものが表示されない…という問題が起こっていました。

理由は、v-forでundefinedの時の挙動を記述していないためでした。
キーワードが入力されていない時（オブジェクトが存在しない）＝undefinedになるので、「searchedTag == ''"」を加え、キーワードが未入力の時も表示されるようにしました。

<div id="listview" v-for="(d, index) in data" 
v-if="d.tagName1 == searchedTag || 
d.tagName2 == searchedTag || 
d.tagName3 == searchedTag || 
searchedTag == ''" :key="d.id">

■ CSSで見た目をいい感じに

今までの見た目は、各要素の配置と大まかな色付けをしたものだったので、
CSSをさわってちょっといい感じにしました。（そんなに変わってませんが。）

いい感じにするといっても、ドロップシャドウをつけて、色を変えたくらいなんですけどね。まだのっぺりしているので、集中力が落ちた時の気紛れに徐々に改変していこうと思います。

次回以降は、

・Google Mapの非表示問題の解決

・住所入力すると、Map上にポインター表示できるプログラムを作成

していきたいと思います。今日はここまで。