Go back to Examples


Versoly Attributes - Advanced

Sorting 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 sort that list using an input element with v-model and v-on:change 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">
                <select class="form-select mt-0 w-[250px]" v-model="postsOrder[0]" v-on:change="fetchFilteredData({})">
                    <option value="order.asc">Default</option>
                    <option value="name.asc">Votes (A to Z)</option>
                    <option value="name.desc">Name (Z to A)</option>
                    <option value="categoryItem.name.asc">Category</option>
                <div class="flex flex-col gap-y-3">
                    <template v-for="post in posts" v-prerender="">
                            <h2 v-html="post.name"></h2>