Multiselect is not visible

[MasterGroosha]

Hello. I'm pretty lame to frontend development, maybe there is a simple solution to my problem. I'm using Vuexy VueJS 2.x template in my app. After adding Multiselect, I see it present in DOM, but not visible at all.

vue-multiselect version: "^2.1.7" vue version: "2.6.12"

Steps to reproduce

Component:

<template>
  <section id="main" class="section-main">
    <multiselect v-model="selectedAdgroups" :options="adgroupSelectOptions">
    </multiselect>
  </section>
</template>
<script>
import Multiselect from 'vue-multiselect';

export default {
  components: {
    Multiselect
  },
  data() {

    return {
      adgroupSelectOptions: ['1', '2', '3']
      selectedAdgroups: null,  // for multiple choice
    }
  },
  computed: {},
  methods: {},

}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Expected behaviour

Working multiselect

Actual behaviour

Styles:

[caoshunshu]

Have you solved it yet

[MasterGroosha]

@caoshunshu unfortunately, no. I’m out if ideas, that’s why I asked my question here

[caoshunshu]

@MasterGroosha Reduced version "vue-multiselect": "^2.1.0",

[gsingh-guru]

@MasterGroosha I'm facing the same issue. In my case it is running in Dev but not in Prod. Let me know if reducing version to 2.1.0 works for you.

[mattelen]

I've put this in a js fiddle running Vue 2.7.9, and this is working fine: https://jsfiddle.net/mattelen/9x4Lgaw3/1/ I set it running Vue 2.6.12, and I'm then able to reproduce the issue: https://jsfiddle.net/mattelen/9x4Lgaw3/2/

Therefore I think that you will need to upgrade to Vue 2.7 to use the multiselect, as this is the latest Vue 2 version, and the migration path from 2.6 to 2.7 is very easy: https://v2.vuejs.org/v2/guide/migration-vue-2-7.html

[LukeTowers]

For anyone else looking at this, it works just fine if you require the officially required minimum version of Vue 2.6.14, we were on 2.6.10 and it doesn't work but switching our project to 2.6.14 worked fine.