Go back to Examples

Search

Versoly Attributes - Advanced

Searching is used when you want an interactive page with a collection list that has many items. If a section has v-collections attribute on it you can search that list using an input element with v-model and v-on:input attributes. 

                <section class="pt-12 pb-24" v-collections="['posts', 'categories']" v-collections-init="">
    <div class="container">
        <div class="row mb-12">
            <div class="col">
                <input class="form-input" v-model="postsSearch" v-on:input="fetchFilteredData({})" type="text" placeholder="Search posts..." />
                <div class="flex flex-col gap-y-3">
                    <template v-for="post in posts" v-prerender="">
                        <div>
                            <h2 v-html="post.name"></h2>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</section>
v-collections-init Filter