Vue Dual List - Dual List using Vuejs and VueMaterial

Try it yourself.

click here

How to install

 npm install vue-dual-list --save

How to use

var VueDualList = require('vue-dual-list');

new Vue({
  el: '#vueduallist',
  name: 'vue-dual-list',
  data: function() {
    return {
      options: {
        label: 'Demo title',
        inputOptions: { uppercase: true, isRequired: false },
        buttonOption: { textLeft: 'Move All', textRight: 'Move All' },
        resizeBox: "md",
        items: [
          { 'id': '1', 'name': 'Alundra' },
          { 'id': '2', 'name': 'Jess' },
          { 'id': '3', 'name': 'Meia' },
          { 'id': '4', 'name': 'Melzas' },
          { 'id': '5', 'name': 'Septimus' },

          { 'id': '6', 'name': 'Rudy Roughknight' },
          { 'id': '7', 'name': 'Jack Van Burace' },
          { 'id': '8', 'name': 'Hanpan' },
          { 'id': '9', 'name': 'Cecilia Adlehyde' },

          { 'id': '10', 'name': 'Serge' },
          { 'id': '11', 'name': 'Kid' },
          { 'id': '12', 'name': 'Lynx' },
          { 'id': '13', 'name': 'Harle' },

        ],
        colorItems: '#1E90FF',
        selectedItems: []
      }
    };
  },
  components: {
    'VueDualList': VueDualList
  }
});

In your page use

  <vue-dual-list id="vueduallist" :options="options"></vue-dual-list>

Dual list options

• options: {label}:(optional): Label that will be displayed in the directive input text.;
• options.inputOptions: {uppercase}(required): Indicates if the letters in input text it will be uppercase.;
• options.inputOptions: {isRequired}(required): Indicates if the letters in input text it will be required.;
• options.buttonOption: {textLeft}(optional): Left button text.;
• options.buttonOption: {textRight}(optional): Right button text.;
• options.resizeBox:(optional): Height of the items box. [{'xs': 150px},{'md': 225px},{'lg': 350px},{'xl': 500px}];
• options.items:(required): Items that will be on the list.;
• options.colorItems:(optional): Color of the items that will be on the list.;
• options.selectedItems:(optional): Items selected by the user.;

change dual list

To execute your changes run the command npm run compile

Used versions

vue

version: 2.2.6

vue-material

version: ^0.7.1

License

It is available under the MIT license. License