#子コンポーネントから親コンポーネントへデータを渡して検索結果を表示させたい
Firebase公式でも推奨しているAlgoliaのライブラリである「vue-instantsearch」を使って
全文検索を実装したいと考えており、以下のようにコードを記述してます。
<ais-search-box>を使わず、inputタグで検索窓を作成して、それをslot-scopeと$emitを使って
親コンポーネントにデータを渡してinputタグにて入力された値の結果を親コンポーネントで検索結果として
表示させいたいと考えております。
algoliaを参考にしながらコードを書いていますが、親コンポーネントへデータを渡せなく、また、親コンポーネントにて検索結果の出し方が分からず困っております・・
検索結果としては親コンポーネントにある<h2 id="top" class="post-tll neon">投稿一覧</h2>の直下に
表示させたいです。
分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願いいたします。
#post.vue(子コンポーネント)
<ais-instant-search :search-client="searchClient" index-name="cinemary-app"> <ais-search-box> <div slot-scope="{searchData}"> <input placeholder="例)アクション 恋愛 ミステリー SF ホラー ミュージカル etc.." class="search-main-item" type="search" :value="searchResult" @input="$emit(searchData.value)" /> </div> </ais-search-box> </ais-instant-search>
import algoliasearch from "algoliasearch/lite"; import "instantsearch.css/themes/satellite.css"; export default { data() { return { searchClient: algoliasearch( "key", "key" ), },
#board.vue(親コンポーネント)
<Post @input="$emit($event.searchData.value)"/> <div class="post"> <h2 id="top" class="post-tll neon">投稿一覧</h2> //検索結果を表示させたい箇所
export default { data() { return { searchData:[] }; }, components: { Post, },
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。