Sorting in Vue Mention component

16 Mar 20234 minutes to read

You can display the suggestions list items in a specific order. It has possible types as Ascending, Descending, and None in the sortOrder property.

• None - The data source is not sorted.
• Ascending - The data source is sorted in ascending order.
• Descending - The data source is sorted in descending order.

In the following sample, the popup list data is rendered in Descending order.

app.vue

<template>
    <div id="app">
        <label id="comment" >Comments</label>
        <div id="mentionElement" placeholder = "Type @ and tag sport"></div>
        <ejs-mention id='defaultMention' :target='target' :fields='fields' :dataSource='userData' sortOrder='Descending'></ejs-mention>
    </div>
</template>

<script>
import Vue from "vue";
import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(MentionPlugin);

export default {
    data: function() {
        return {
            target: "#mentionElement",
            userData : [
                { ID : "game1" ,Game : "Badminton"},
                { ID : "game2" ,Game : "Football" },
                { ID : "game3" ,Game : "Tennis"},
                { ID : "game4" ,Game : "Hockey"},
                { ID : "game5" ,Game : "Basketball"},
                { ID : "game6" ,Game : "Cricket"}
            ],
            fields : {text:'Game', value:'ID'}
        };
    }
}
</script>

<style>

    @import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-list/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";

    #app {
        color: #008cff;
        height: 40px;
        left: 15%;
        position: absolute;
        top: 10%;
        width: 30%;
    }

    #comment {
        font-size: 15px;
        font-weight: 600;
    }

    #mentionElement {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }
</style>