hjs-multiselect

It's a multiselect vue.js component. Demo

Warning!

This is an example of how to create and publish a npm package and it was created for learning purposes and as an example for horchata js conference, DON'T USE IT ON PRODUCTION

If you want to read the gitbook about, "How to create a Node js package", go here (it's in spanish)

Install

npm:

  npm install @horchatajs/hjs-multiselect --save

yarn:

  yarn add @horchatajs/hjs-multiselect

Usage

HTML

<div id="app">
  <p><label for="">Países</label></p>
  <hjs-multiselect placeholder="Please select countries" v-bind:items="items" v-bind:select="select"  @change="onChange"></hjs-multiselect>
</div>
<div id="preview"></div>

Javascript

Vue.use(HjsMultiselect); // Register the global UI component

new Vue({
  el: '#app',
  data: {

    select: [{ text: 'El Salvador', value: 'SV' }],
    items: [
      {text: "El Salvador", value: "SV"},
      {text: "Guatemala", value: "GT"},
      {text: "Honduras", value: "HN"}
    ]
  },
  methods: {
    onChange: function(item, items){
      let preview = document.getElementById('preview');
      preview.innerHTML = "<p>On change event, preview of selected items: "+JSON.stringify(items)+ "</p>"
    }
  }
})

Contributors

• @emilioforrer
• @ricardoerl