vue-multiselect does not render

Question

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:

But what gets rendered in my app is

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?

Moritz Ringler · Accepted Answer · 2023-04-14 09:28:34Z

1

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/[email protected]/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/[email protected]"></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.

edited Apr 14, 2023 at 9:28

answered Apr 13, 2023 at 18:32

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saptarshi Over a year ago

This worked! Thanks a lot! Any ideas why it could fail from an installed package?

Moritz Ringler Over a year ago

Not sure, it should work just the same. In your question, you said it wasn't working with CDN before. If it does not, I would assume if you just change the import statement and remove the <script>, it will now work too (I added the import to the answer). Does that work?

Saptarshi Over a year ago

Strangely it does not. But thanks for the help. If there are no better suggestions I will tick your answer.

Moritz Ringler Over a year ago

That is weird. Pretty sure the issue is in your setup (I have used vue-multiselect with import and I do not remember any kerfuffle). Since you are not getting an error and Vue does seem to know a component named multiselect, something has to be imported. But if it is not working, it must be the wrong package, right? I would check package-lock.json and/or node_modules/vue-multiselect, probably see what a console.log on the import gives me. But that's all just guesswork, sorry. Good luck!

Collectives™ on Stack Overflow

vue-multiselect does not render

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related