Two way binding in Vue Drop down list component

11 Jun 20245 minutes to read

Two-way binding can be achieved by using the v-model directive in Vue. In the following sample, when you change the value in one DropDownList component, v-model will automatically update the value in the other DropDownList.

The following example demonstrates how to set the two-way-binding in the DropDownList.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <div id="wrapper1">
      <ejs-dropdownlist id='first' :dataSource='sportsData' :fields='fields' :placeholder="waterMark"
        v-model="value"></ejs-dropdownlist>
    </div>
    <div id="wrapper2">
      <ejs-dropdownlist id='second' :dataSource='sportsData' :fields='fields' :placeholder="waterMark"
        v-model="value"></ejs-dropdownlist>
    </div>
  </div>
</template>
<script setup>
import { DropDownListComponent as EjsDropdownlist } from '@syncfusion/ej2-vue-dropdowns';

const waterMark = 'Select a game';
const value = null;
const sportsData = [
  { Id: 'Game1', Game: 'Badminton' },
  { Id: 'Game2', Game: 'Basketball' },
  { Id: 'Game3', Game: 'Cricket' },
  { Id: 'Game4', Game: 'Football' },
  { Id: 'Game5', Game: 'Golf' },
  { Id: 'Game6', Game: 'Hockey' },
  { Id: 'Game7', Game: 'Rugby' },
  { Id: 'Game8', Game: 'Snooker' }
];
const fields = { value: 'Game' };

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

#wrapper1 {
  min-width: 250px;
  float: left;
  margin-left: 100px;
}

#wrapper2 {
  min-width: 250px;
  float: right;
  margin-right: 100px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <div id="wrapper1">
      <ejs-dropdownlist id='first' :dataSource='sportsData' :fields='fields' :placeholder="waterMark"
        v-model="value"></ejs-dropdownlist>
    </div>
    <div id="wrapper2">
      <ejs-dropdownlist id='second' :dataSource='sportsData' :fields='fields' :placeholder="waterMark"
        v-model="value"></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';

export default {
  name: "App",
  components: {
    "ejs-dropdownlist": DropDownListComponent
  },
  data() {
    return {
      waterMark: 'Select a game',
      value: null,
      sportsData: [
        { Id: 'Game1', Game: 'Badminton' },
        { Id: 'Game2', Game: 'Basketball' },
        { Id: 'Game3', Game: 'Cricket' },
        { Id: 'Game4', Game: 'Football' },
        { Id: 'Game5', Game: 'Golf' },
        { Id: 'Game6', Game: 'Hockey' },
        { Id: 'Game7', Game: 'Rugby' },
        { Id: 'Game8', Game: 'Snooker' }
      ],
      fields: { value: 'Game' }
    }
  }
}
</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";

#wrapper1 {
  min-width: 250px;
  float: left;
  margin-left: 100px;
}

#wrapper2 {
  min-width: 250px;
  float: right;
  margin-right: 100px;
}
</style>