Dualist

Dual list component for vue js

Dependencies

Dualist works with lodash and bootstrap 3

Usage

Instalation

Install the library with npm install vue-dualist

Configuration

The collection property is the data that are shown on the list and key_index is the key on the collection elements that is needed to customize the list text.

<script src="vue-dualist.min.js"></script>
<div id="app">
    <vue-dualist :collection="collection" key_index="name"></vue-dualist>
</div>

<script type="text/javascript">
    Vue.use(Dualist);
    new Vue({
      el: '#app',
      data: {
        collection: [
          {
            id: 1,
            name: "text 1"
          },
          {
            id: 2,
            name: "text 2"
          },
          {
            id: 3,
            name: "text 3"
          },
          {
            id: 4,
            name: "text 4"
          },
          {
            id: 5,
            name: "text 5"
          }
        ]
      }
    });
  </script>

Events

To access the selected elements on the list, dualist triggers a event to it's parent.

|Event name|Payload| | ----------- | ----------- | |dualist-subscribe| { new_element: object, subscribed_elements: array } | |dualist-unsubscribe| { removed_element: object, subscribed_elements: array } | |dualist-subscribe-all| { subscribed_elements: array } | |dualist-unsubscribe-all| empty |

Build

To build the component you must run npm run build