vue-dualist v0.0.1

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.

Build

To build the component you must run npm run build