Sorting in Vue Mention component

11 Jun 20246 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.

<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 setup>
import { MentionComponent as EjsMention } from "@syncfusion/ej2-vue-dropdowns";

const target = "#mentionElement";
const 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" }
];
const 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>
<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 { MentionComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
    name: "App",
    components: {
        "ejs-mention": MentionComponent
    },
    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>