In my component hierarchy, I have a child component called home-book-line:
<template>
<div>
<div v-if="items && items.length > 0">
<nuxt-link :to="`/books/${item.id}`" @click="closeAndHideSearchBar" class="d-flex align-center pb-4 pr-2" v-for="item in items" :key="item.id">
<v-img width="30" height="44" contain :src="item.image" class="bookImage" />
<div class="mr-3 text-right">
<span class="body4-medium" style="color: #262626">{{ item.title }} / </span>
<span class="body4-medium" style="color: #262626" v-for="(associate, index) in item.associates.author" :key="associate.id">
{{ associate.title }}
{{ index < item.associates.author.length - 1 ? ', ' : '' }}
</span>
<span class="caption3-regular s60--text d-block" v-for="associate in item.associates.category" :key="associate.id">{{ associate.title }}</span>
</div>
</nuxt-link>
</div>
<div v-else class="body1-medium text-center mt-4">No results found.</div>
</div>
</template>
<script>
export default {
name: "bookLink",
props: ['items'],
methods: {
closeAndHideSearchBar() {
this.$emit('closeSearchBar');
},
},
}
</script>
This component is used in another child component called home-search-bar-app:
<template>
<v-card class="borderRadius-4 pa-2" style="box-shadow: 0px 0px 8px rgba(145, 145, 145, 0.15) !important" :showSearchBar.sync="showSearchBar">
<v-row class="ma-0">
<v-col cols="12">
<v-tabs v-model="tabs" color="#091E42">
<v-tab href="#all">All</v-tab>
<v-tab href="#book">Book Name</v-tab>
<v-tab href="#category">Category</v-tab>
<v-tab href="#editor">Author Name</v-tab>
</v-tabs>
<x-hr />
</v-col>
<v-col cols="8">
<div>
<v-tabs-items v-model="tabs">
<v-tab-item value="all">
<home-book-link v-if="allBookLoadig" :items="allSearchResult" @closeSearchBar="closeSearchBar" />
<!-- <home-expansion-panels :panels="panels" /> -->
</v-tab-item>
<v-tab-item value="book">
<home-book-link v-if="bookNameLoading" :items="bookNameSearchResult" @closeSearchBar="closeSearchBar" />
<!-- <home-expansion-panels :panels="panels" /> -->
</v-tab-item>
<v-tab-item value="category">
<home-book-link v-if="categoryLoading" :items="categorySearchResult" @closeSearchBar="closeSearchBar" />
</v-tab-item>
<v-tab-item value="editor">
<home-book-link v-if="authorLoading" :items="authorSearchResult" @closeSearchBar="closeSearchBar" />
</v-tab-item>
</v-tabs-items>
</div>
</v-col>
</v-row>
</v-card>
</template>
<script>
export default {
name: "SearchBarApp",
props: { toggle: false, searchText: String, showSearchBar: false },
methods: {
closeSearchBar() {
this.$emit('close');
},
},
}
</script>
This component is then used in a parent component as follows:
<v-col cols="7" style="position: relative" class="px-0 mx-2">
<x-input
class="body3-regular serach-input"
id="grey"
placeholder="Search for book name, category or author name"
appendIcon="mdi-magnify"
v-model="searchText"
@input="showSearchBar = searchText.length > 0"
/>
<home-search-bar-app
ref="searchBar"
:showSearchBar.sync="showSearchBar"
@close="showSearchBar = false"
style="position: absolute;top: 90px;left: 0px"
:search-text="searchText"
@changeSearch="(val) => changeSearch(val)"
class="d-none d-sm-block w-full"
/>
</v-col>
I am trying to hide the home-search-bar-app component when clicking on the home-book-link component and set showSearchBar to false. However, I have been unsuccessful in handling the emit event. If anyone could assist me with this issue, I would greatly appreciate it.