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.

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

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' },

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

  float: left;
  width: 44%;

  float: right;
  width: 44%;