CODEWITHSUNDEEP
javascriptvue.jsvue-component
code_together_today
code_together_today

Reputation: 31

Using vue-multiselect.js in regular html page

I'm trying to use vue-multiselect.js in regular html page. its not working. Here's my code:

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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  }}</code></pre>
</div>

<script type="text/javascript">
import Multiselect from 'vue-multiselect'

export default {
components: {
    Multiselect
},
data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
        }
    }
}
</script>

This is what it writes in console - Uncaught SyntaxError: Unexpected identifier in line 12

Upvotes: 0

Views: 607

Answers (1)

LIGHT
LIGHT

Reputation: 5712

You're doing it all wrong. Here's a working code for the concept:

HTML:

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

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

Upvotes: 1

Related Questions