How to create Dual Listbox for Vue JS? Meet the dual-listbox-vue component

How to create Dual Listbox for Vue JS? Meet the dual-listbox-vue component – Vue JS dual list box on steroids.

Component for Vue JS dual list box implementation

When developing real-world software, we may have to implement more advanced UI features, such as dual listbox. In Vue.js it’s a piece of cake.

Dual Listbox component for Vue.js
Dual Listbox component for Vue.js

Setup

npm install dual-listbox-vue --save

Sample

JS code:

import DualListBox from "dual-listbox-vue";
import "dual-listbox-vue/dist/dual-listbox.css";
export default {
    name: "App",
    components: {
        DualListBox
    },
    data: function () {
        return {
            source: [
                { name: "WHITE", code: "#FFFFFF" },
                { name: "SILVER", code: "#C0C0C0" },
                { name: "GRAY", code: "#808080" }
            ],
            destination: [
                { name: "BLACK", code: "#000000" },
                { name: "RED", code: "#FF0000" }
            ]
        };
    },
    methods: {
        onChangeList: function ({ source, destination }) {
            this.source = source;
            this.destination = destination;
        }
    }
};

HTML template:

<DualListBox
    :source="source" 
    :destination="destination"
    label="name"
    @onChangeList="onChangeList"
/>

License: Unknown

On-line demo
https://codesandbox.io/s/dual-plugin-eilhu

GitHub

https://github.com/VigneshwarSridharan/dual-listbox-vue

scraperapi

See also

Bootstrap dual listbox solution

JavaScript file upload library – filepond JS, with adapters for Vue and React JS!

jQuery form builder plugin

Enjoy!