vue select try

by cactus77kiki

HTML

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">

<div id="vueapp">
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="請選擇或輸入搜尋條件" label="name" track-by="name" :preselect-first="true">
    <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

JavaScript

Vue.component('multiselect', window.VueMultiselect.default);
var app = new Vue({
	el:'#vueapp',
  components: {
  	//Multiselect: window.VueMultiselect.default
	},
  data:{
  	value: [],
      options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Adonis', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP' },
        { name: 'Phoenix', language: 'Elixir' }
      ]
  },
  methods:{
  	getdata: function(){
    
    }
  }
});
/*
doc:
https://vue-multiselect.js.org/
ex:
https://jsfiddle.net/shentao/s0ugwmjp/
*/