A Component For Vue.js To Select Double-sided Data

Vue Select Sides is a component of Vue.js to select two-sided data. Customers can choose one or more items and have them shipped from one side to the other. Values can be displayed grouped or ungrouped.

dual list box material design, dual listbox get selected value, dual list box javascript, jquery transfer dual listbox plugin example, jquery dual listbox

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-select-sides
# NPM
$ npm install vue-select-sides --save

1. Import the sides of the selection vue as a component.

import vueSelectSides from "vue-select-sides";

2. Import a theme of your choice.

// modern theme
@import "/node_modules/vue-select-sides/styles/themes/soft.scss";
// or dark theme 
@import "/node_modules/vue-select-sides/styles/themes/dark.scss";
// or light theme
@import "/node_modules/vue-select-sides/styles/themes/light.scss";

3. Add selection sides to your template.

<!-- Grouped -->
<vue-select-sides
  type="grouped"
  v-model="selected"
  :list="list"
></vue-select-sides>
<!-- Mirror -->
<vue-select-sides
  type="mirror"
  v-model="selected"
  :list="list"
></vue-select-sides>

4. Register the component and select the Options menu for the dual list box.

export default {
  components: {
    vueSelectSides
  },
  data() {
    return {
      selected: {},
      list: [
        {
          value: "value1",
          label: "Vaule 1",
          children: [
            {
              value: "value-1-1",
              label: "Value 1.1",
              disabled: true
            },
            {
              value: "value-1-2",
              label: "Value 1.2"
            }
          ]
        },
        {
          value: "value2",
          label: "Vaule 2",
          children: [
            {
              value: "value-2-1",
              label: "Value 2.1"
            },
            {
              value: "value-2-2",
              label: "Value 2.2"
            }
          ]
        }
      ]
    };
  }
};

5. All possible props to configure the dual list box.

list: {
  required: true,
  type: [Array, Object]
},
type: {
  type: String,
  default: "grouped"
},
lang: {
  type: String,
  default: "en_US"
},
orderBy: {
  type: String,
  default: undefined
},
placeholderSearchLeft: {
  type: [String, Boolean],
  default: false
},
placeholderSearchRight: {
  type: [String, Boolean],
  default: false
},
sortSelectedUp: {
  type: Boolean,
  default: false
},
search: {
  type: Boolean,
  default: true
},
total: {
  type: Boolean,
  default: true
},
toggleAll: {
  type: Boolean,
  default: true
},
model: {
  type: [Object, Array],
  default: undefined
}

Searchable Sortable Dual List Box Component, Vue Select Sides Plugin/Github