JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-bootstrap-multiselect/dist/vue-bootstrap-multiselect.min.css">
<script src="https://unpkg.com/vue-bootstrap-multiselect/dist/vue-bootstrap-multiselect.min.js"></script>
<br>
<div id="vue">
  <!-- Simple select -->
  <div class="row">
    <div class="col-8 offset-2">
      <label>Simple select</label>
      <component is="multiselect"
       :all-values="['One', 'Two', 'Three', 'Four']"
       value="One"
    ></component>
    </div>
  </div>
  
  <!-- Multiselect -->
  <div class="row">
    <div class="col-8 offset-2">
      <label>Multiselect</label>
      <component is="multiselect"
       :is-multi="true"
       :is-search="false"
       :all-values="['One', 'Two', 'Three', 'Four']"
       value="One"
    ></component>
    </div>
  </div>
  
  <!-- Multiselect with search -->
  <div class="row">
    <div class="col-8 offset-2">
      <label>Multiselect with search</label>
      <component is="multiselect"
       :is-multi="true"
       :all-values="['One', 'Two', 'Three', 'Four']"
       value="One"
    ></component>
    </div>
  </div>
  
  <!-- Async data from server -->
  <div class="row">
    <div class="col-8 offset-2">
      <label>Async data from server</label>
      <component is="multiselect"
        :is-multi="true"
        async-search-url="https://api.mockaroo.com/api/0bb305f0?count=5&key=f2eb7950"
        :value="['Minerva Chilver', 'Jon Spencly']"
      ></component>
      <small class="text-muted">* Unfortunately, the data generation server does not support searching. This search will not work here
      </small>
    </div>
  </div>
  
</div>

CSS

label {
  font-weight: bold;
  margin-top: 10px;
}

JavaScript

const app = new Vue({
	el: "#vue",
  components: {multiselect: window.VueBootstrapMultiselect}
})