Использование vue-multiselect.js на обычной HTML-странице - PullRequest
Новая
       9

Использование vue-multiselect.js на обычной HTML-странице

0 голосов
/ 11 мая 2018

Я пытаюсь использовать vue-multiselect.js на обычной html-странице.это не работает.Вот мой код: 

<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>
  <label class="typo__label">Single select</label>
  <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
  <pre class="language-json"><code>{{ value  }}

1 Ответ

0 голосов
/ 11 мая 2018

Вы все делаете неправильно. Вот рабочий код для концепции:

HTML: 

<code><div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    >
  </multiselect>
  <pre>{{ value }}

Javascript: 

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    value: { language: 'JavaScript', library: 'Vue-Multiselect' },
    options: [
        {   language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
    },
  methods: {
    customLabel (option) {
      return `${option.library} - ${option.language}`
    }
  }
}).$mount('#app')

Jsfiddle

...