Test vue select

by hyeyoon

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<div id="app">
  <h1>Vue Select</h1>
  <v-select multiple :options="options" ref="select">
    <span slot="no-options">
      Nothing found. 
      <button @click="addOption">Add new?</button>
    </span>
  </v-select>
</div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

#app {
  max-width: 35em;
  margin: 1em auto;
}

JavaScript

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: ['foo','bar']
  }, 
  methods: {
    addOption() {
      let search = this.$refs.select.search
      this.options.push(search)
      this.$refs.select.select(search)
    }
  },
  
});