vuejs2vue-multiselect

vue-multiselect does not render

I am trying to render a simple vue-multiselect dropdown from a project. The code is copied from one of the simpler examples on the website https://vue-multiselect.js.org/#sub-single-select

The code roughly looks as following:

    indexPropertyMap: {
        value: "",
        options: [
          "Select option",
          "options",
          "selected",
          "multiple",
          "label",
          "searchable",
          "clearOnSelect",
          "hideSelected",
          "maxHeight",
          "allowEmpty",
          "showLabels",
          "onChange",
          "touched",
        ],
      },
    };

The html looks as follows

<multiselect
  v-model="indexPropertyMap.value"
  :options="indexPropertyMap.options"
  :searchable="false"
  :close-on-select="false"
  :show-labels="false"
  placeholder="Pick a value"
></multiselect>

This does not render the dropdown.

The expected rendered HTML from the website is:

enter image description here

But what gets rendered in my app is

enter image description here

I have tried versions 2.1.7, 2.1.6 and 2.1.0 using yarn and cdn. Could you please guide me as to what could be the problem?

Solution

  • You code works when I put it into a snippet:

    Vue.component('vue-multiselect', window.VueMultiselect.default) // <--- register globally

new Vue({
  el: '#app',
  components: {
//    'vue-multiselect': window.VueMultiselect.default  // <---- or locally in component
  },
  data() {
    return {
      indexPropertyMap: {
        value: "",
        options: [
          "Select option",
          "options",
          "selected",
          "multiple",
          "label",
          "searchable",
          "clearOnSelect",
          "hideSelected",
          "maxHeight",
          "allowEmpty",
          "showLabels",
          "onChange",
          "touched",
        ],
      },
    }

  }
})
    <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.6/dist/vue-multiselect.min.css">

<div id="app">
  
  <vue-multiselect
    v-model="indexPropertyMap.value"
    :options="indexPropertyMap.options"
    :searchable="false"
    :close-on-select="false"
    :show-labels="false"
    placeholder="Pick a value"
  ></vue-multiselect>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.6"></script>

    Using it from node_modules should work just the same, but instead of the <script> import, you use import statements:

    import Multiselect from 'vue-multiselect'
Vue.component('VueMultiselect', Multiselect)

    then you can use it with <VueMultiselect> or <vue-multiselect>, but of course you can register it with a different name.