Modify data in Vue Drop down list component

11 Jun 20244 minutes to read
When binding the remote data source, by using the actionComplete event, you can modify the result data before passing it to DropDownList.
The following sample demonstrate how to modify the result data.
Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' :actionComplete='actionComplete'
        :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script setup>
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";

const query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
const dataSource = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
});
const fields = { text: 'ContactName', value: 'CustomerID' };

const actionComplete = function (e) {
  // initially result contains 6 items
  console.log("Before modified the result: " + e.result.length);
  // remove first 2 items from result.
  e.result.splice(0, 2);
  // now displays the result count is 4.
  console.log("After modified the result: " + e.result.length);
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' :actionComplete='actionComplete'
        :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";

export default {
  name: "App",
  components: {
    "ejs-dropdownlist": DropDownListComponent
  },
  data() {
    return {
      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
      dataSource: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
      }),
      fields: { text: 'ContactName', value: 'CustomerID' }
    }
  },
  methods: {
    actionComplete: function (e) {
      // initially result contains 6 items
      console.log("Before modified the result: " + e.result.length);
      // remove first 2 items from result.
      e.result.splice(0, 2);
      // now displays the result count is 4.
      console.log("After modified the result: " + e.result.length);
    }
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>