Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
kt trigger input field event
respect to you all
I have a question
There is a search input in the header field, when a text is written to it, I want to show the components in search.vue, but while doing this
A click operation is required to show the content part in search.vue. I want to show that component when there is an event in the input field in my header component, not with the click operation.
this toggle area
<template v-slot:toggle>
<!--begin::Search-->
<div
id="kt_header_search"
class="d-flex align-items-stretch"
data-kt-menu-target="#kt-search-menu"
data-kt-menu-trigger="click"
data-kt-menu-attach="parent"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="bottom"
>
<!--begin::Search toggle-->
<!-- <div class="d-flex align-items-center" id="kt_header_search_toggle" >-->
<!-- <div class="btn-search">-->
<!-- <button class="text-white border-transparent bg-transparent">-->
<!-- <inline-svg src="/kobasis/icon/IconSearch.svg" />-->
<!-- Bağışçı Ara-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<div class="btn-search position-relative">
<div class="text-white border-transparent bg-transparent d-flex align-items-center">
<inline-svg src="/kobasis/icon/IconSearch.svg" />
<input
ref="inputRef"
v-model="search"
@input="searching($event)"
type="text"
name="search"
placeholder="Bağışçı Ara"
class="bg-transparent text-white mx-1"
/>
<span v-if="loading" class="position-absolute top-50 end-0 translate-middle-y lh-0 mx-2">
<span class="spinner-border h-15px w-15px align-middle text-white"></span>
</span>
</div>
</div>
<!--end::Search toggle-->
</div>
<!--end::Search-->
</template>
<pre/>
this content area
<pre>
<template v-slot:content>
<!--begin::Menu-->
<div
class="menu menu-sub menu-sub-dropdown menu-column p-7 w-325px w-md-375px"
data-kt-menu="true"
id="kt-search-menu"
>
<!--begin::Wrapper-->
<div>
<!--begin::Form-->
<!-- <form class="w-100 position-relative mb-3" autocomplete="off">-->
<!-- <!–begin::Icon–>-->
<!-- <span-->
<!-- class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 translate-middle-y ms-0"-->
<!-- >-->
<!-- <inline-svg src="/media/icons/duotune/general/gen021.svg" />-->
<!-- </span>-->
<!-- <!–end::Icon–>-->
<!-- <!–begin::Input–>-->
<!-- <input-->
<!-- ref="inputRef"-->
<!-- v-model="search"-->
<!-- @input="searching($event)"-->
<!-- type="text"-->
<!-- class="form-control form-control-flush ps-10"-->
<!-- name="search"-->
<!-- placeholder="Bağışçı Ara..."-->
<!-- />-->
<!-- <!–end::Input–>-->
<!-- <!–begin::Spinner–>-->
<!-- <span v-if="loading" class="position-absolute top-50 end-0 translate-middle-y lh-0 me-1">-->
<!-- <span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>-->
<!-- </span>-->
<!-- <!–end::Spinner–>-->
<!-- <!–begin::Reset–>-->
<!-- <span-->
<!-- v-show="search.length && !loading"-->
<!-- @click="reset()"-->
<!-- class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0"-->
<!-- >-->
<!-- <span class="svg-icon svg-icon-2 svg-icon-lg-1 me-0">-->
<!-- <inline-svg src="/media/icons/duotune/arrows/arr061.svg" />-->
<!-- </span>-->
<!-- </span>-->
<!-- <!–end::Reset–>-->
<!-- <!–begin::Toolbar–>-->
<!-- <!–end::Toolbar–>-->
<!-- </form>-->
<!--end::Form-->
<div v-if="search.length < 2">Bağışçı ismini yazınız</div>
<!--begin::Separator-->
<div class="separator border-gray-200 mb-6"></div>
<!--end::Separator-->
<Results :data="bagiscilar" v-if="state === "results""></Results>
<!-- <Main v-else-if="state === "main""></Main>-->
<Empty v-else-if="state === "empty""></Empty>
</div>
<!--end::Wrapper-->
</div>
<!--end::Menu-->
</template>
Replies (1)
Hi Kadir,
Thank you for reaching out to us.
It sounds like you are trying to display different menu content depending on the value of the field. To achieve this you can use Vue conditional rendering directives v-if and v-else.
For more info, you can refer to Vue 3 official documentation.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
