Search results

Two-Way Binding in Vue ListBox component

It can be achieved by using the v-model directive in vue. In the following sample the value selected in one ListBox will automatically changes in the other ListBox. It updates the other ListBox using value property.

Source
Preview
app.vue
<template>
  <div id='container' style="margin:10px auto 0; width:430px;">
  <div class="listbox1">
      <ejs-listbox :dataSource='data' v-model="value"></ejs-listbox>
  </div>
  <div class="listbox2">
      <ejs-listbox :dataSource='data' v-model="value"></ejs-listbox>
  </div>
</div>  
</template>
<script>
import Vue from 'vue';
import { ListBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(ListBoxPlugin);
export default {
  data (){
    return {
        value: null,
    data: [
    { text: 'Hennessey Venom', id: 'list-01' },
    { text: 'Bugatti Chiron', id: 'list-02' },
    { text: 'SSC Ultimate Aero', id: 'list-03' },
    { text: 'Koenigsegg CCR', id: 'list-04' },
    { text: 'McLaren F1', id: 'list-05' },
    { text: 'Aston Martin One- 77', id: 'list-06' },
    { text: 'Jaguar XJ220', id: 'list-07' },
    { text: 'McLaren P1', id: 'list-08' },
    { text: 'Ferrari LaFerrari', id: 'list-09' },
];
    }
  }
}

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

.listbox1{
  float: left;
  width: 44%;
}

.listbox2{
  float: right;
  width: 44%;
}

</style>