Created
October 13, 2019 04:13
-
-
Save Kazuki-tam/7e23a246c22d628ce1fc124b364255df to your computer and use it in GitHub Desktop.
Algolia_vue_instant_search
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="wrapper"> | |
<h1 class="heading">{{ msg }}</h1> | |
<ais-index | |
app-id=“アプリケーションID" | |
api-key=“APIキー" | |
index-name=“インデックス名" | |
> | |
<!-- 検索フォーム --> | |
<ais-search-box placeholder="スイーツを検索してください"></ais-search-box> | |
<!--//End 検索フォーム --> | |
<!-- 絞り込みメニュー --> | |
<ais-refinement-list attribute-name="category"></ais-refinement-list> | |
<!--//End 絞り込みメニュー --> | |
<!-- 検索結果ヒット --> | |
<ais-results> | |
<template slot-scope="{ result }"> | |
<div class="card_box"> | |
<p class="card_img"><img :src="result.image" :alt="result.image_alt"></p> | |
<p class="card_ttl"><ais-highlight :result="result" attribute-name="title"></ais-highlight></p> | |
<p class="card_price">¥{{ result.price | priceDelimiter }}</p> | |
<p class="card_des"><ais-highlight :result="result" attribute-name="description"></ais-highlight></p> | |
</div> | |
</template> | |
</ais-results> | |
<!--//End 検索結果ヒット --> | |
<!-- 検索結果0件の場合 --> | |
<ais-no-results> | |
<template slot-scope="props"> | |
<i>{{ props.query }}</i>は見つかりませんでした。 | |
</template> | |
</ais-no-results> | |
<!--//End 検索結果0件の場合 —> | |
</ais-index> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'app', | |
data () { | |
return { | |
msg: 'スイーツ検索' | |
} | |
}, | |
filters: { | |
priceDelimiter: function (value) { | |
if (!value) { | |
return '販売されていません' | |
} | |
return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,') | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment