Value change in Vue Drop down list component

11 Jun 20245 minutes to read

You can check about whether value change happened by manual or programmatic by using change event argument that argument name is isInteracted.

The following example demonstrate, how to check whether value change happened by manual or programmatic.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <div id='container' style="margin:0 auto; width:250px;">
      <br>
      <ejs-dropdownlist id='dropdownlist' ref='dropdown' :dataSource='sportsData' :fields='fields' :change='onChange'
        placeholder='Select a game'></ejs-dropdownlist>
    </div>
    <div style='margin: 50px'>
      <button id='button' class="e-control e-btn" v-on:click="onClick"> Set value dynamically</button>
    </div>
    <p style='margin: 5px' id='event'> </p>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";

const dropdown = ref(null);
const sportsData = [
  { Id: 'game1', Game: 'Badminton' },
  { Id: 'game2', Game: 'Football' },
  { Id: 'game3', Game: 'Tennis' }
];
const fields = { text: 'Game', value: 'Id' }

const onClick = function (event) {
  dropdown.value.ej2Instances.value = 'game3';
};
const onChange = function (args) {
  let element = document.createElement('p');
  if (args.isInteracted) {
    element.innerText = 'Changes happened by Interaction';
  } else {
    element.innerText = 'Changes happened by programmatic';
  }
  document.getElementById('event').append(element);
}

</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>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <div id='container' style="margin:0 auto; width:250px;">
      <br>
      <ejs-dropdownlist id='dropdownlist' ref='dropdown' :dataSource='sportsData' :fields='fields' :change='onChange'
        placeholder='Select a game'></ejs-dropdownlist>
    </div>
    <div style='margin: 50px'>
      <button id='button' class="e-control e-btn" v-on:click="onClick"> Set value dynamically</button>
    </div>
    <p style='margin: 5px' id='event'> </p>
  </div>
</template>
<script>
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
  name: "App",
  components: {
    "ejs-dropdownlist": DropDownListComponent
  },
  data() {
    return {
      sportsData: [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' }
      ],
      fields: { text: 'Game', value: 'Id' }
    }
  },
  methods: {
    onClick: function (event) {
      this.$refs.dropdown.ej2Instances.value = 'game3';
    },
    onChange: function (args) {
      let element = document.createElement('p');
      if (args.isInteracted) {
        element.innerText = 'Changes happened by Interaction';
      } else {
        element.innerText = 'Changes happened by programmatic';
      }
      document.getElementById('event').append(element);
    }
  }
}
</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>