はじめに

前回、Laravel + VueでSPAを構築し、VueTinderを表示するまでのフローをご紹介しました。今回はカスタマイズ例をいくつかご紹介させていただければと思います。

ping画像からオリジナルのデータに置き換える。

前回の実装では、VueTinderの公式ドキュメントに載っているコードに従って、pingの画像IDの配列をデータとしてカードを表示しいました。
キメタビでは、スポットのIDや、スポットの名称、画像のURLなどの複数の情報が1行のデータになっています。

元にするデータ

{
  "spots": [
    {
      "spot_id": "ChIJy4fJGacrUjURKQZXR6Pvka0",
      "name": "箸蔵寺",
      "address": "日本、〒778-0020 徳島県三好市池田町州津蔵谷",
      "phone_number": "0883-72-0812",
      "business_time": [
        "string"
      ],
      "photo_references": [
        "ATtYBwIStzJtjXE4eRxGkF861KfQn78LXJKyWEWLbBTkEvkvBITDTZ_HldVPYfmRqhfk2Slv-khPLqM-_JSwpAr21VYTQGpHcNSl7bZf95j7cWKWdvVSzGlAethw2zQ7D0S7wwsGV3F_jFCYO_zidPZvce3ApJ4lv0qSPmho42kxg54lw1Y9"
      ],
      "reviews": [
        {
          "rating": 4.5,
          "review": "ロープウェイに乗って、5分ぐらいでお寺に着きます。",
          "posting_time": "",
          "relative_posting_time": "1 か月前"
        },
        {
          "rating": 4.5,
          "review": "ロープウェイに乗って、5分ぐらいでお寺に着きます。",
          "posting_time": "",
          "relative_posting_time": "1 か月前"
        }
      ],
      "website": "http://www.hashikura.or.jp/",
      "coupon": false,
      "start_time": "10:00:00.000000+09:00",
      "end_time": "10:00:00.000000+09:00",
      "description": "徳川家康によって作られた",
      "distance": 3.5,
      "latitude": 35.39,
      "longitude": 139.44
    }
  ]
}

<VueTinder
key-name="spot_id"
:queue.sync="queue"
>

mock() {
~~~省略~~~
this.queue.push(spot);
}

このようにすることで、カードを表示するデータを変更することができます。

ボタンで操作できるようにする。

</vueTinder>下に配置

<div class="btns">
      <img src="/images/rewind.png" @click="decide('rewind')" />
      <img src="/images/nope.png" @click="decide('nope')" />
      <img src="/images/love.png" @click="decide('like')" />
      <img src="/images/info.png" @click="open_detail(queue[0].spot_id)" />
    </div>

methods内に記述

async decide(choice) {
      if (choice === "rewind") {
        if (this.history.length) {
          this.$refs.tinder.rewind([this.history.pop()]);
        }
      } else if (choice == "help") {
        // window.open("https://google.com");
      } else {
        this.$refs.tinder.decide(choice);
      }
    }

css

.btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 55px;
  margin: auto;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  max-width: 320px;
}

.btns img {
  margin-right: 12px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

1つ前に戻るボタンを設置する。

上記のボタン設置を行ったあと、data 内に

history: []

を追加します。

現在表示しているカードの情報を<VueTinder>外で使用する。

queue[0] が現在表示しているデータに当たります。キメタビの例だと、{{ this.queue[0].name }} とすることで、観光地の名称を表示しています。