[Vuejs]-How to use v-model for both form and populate the dropdown

by

0👍

You should use multi-select for v-model the element. Here is an example.

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: '',
    options: [{
        name: 'Vue.js',
        language: 'JavaScript'
      },
      {
        name: 'Rails',
        language: 'Ruby'
      },
      {
        name: 'Sinatra',
        language: 'Ruby'
      },
      {
        name: 'Laravel',
        language: 'PHP',
        $isDisabled: true
      }
    ]
  },
  methods: {}
}).$mount('#app')
* {
  font-family: 'Lato', 'Avenir', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <multiselect v-model="value" :options="options" placeholder="Pick some" label="name" track-by="name" id="example">
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

Leave a comment