v-select dropdown is not visible

Hello,

I am trying to add the v-select to my .vue template like this:

`<template> <div> … <div v-cloak v-show=“showHosts()”> <label class=“form-control-label”> Hosts </label>
<v-select :searchable=true multiple :value.sync=“selected” :options=options></v-select> </div> …

</div> </template>

… data () { return {
selected: null, options: JSON.parse(‘[{“label”: “foo”, “value”: “Foo”},{“label”: “boo”, “value”: “Boo”},{“label”: “loo”, “value”: “Loo”},{“label”: “moo”, “value”: “Moo”},{“label”: “zoo”, “value”: “Zoo”}]’) } }, components: {vSelect},`

However, even if I can type and select the “foo” and “boo” items, the dropdown menu ul tag displays transition=“expand” and the dropdown is not displayed.

My package.json contains:

“dependencies”: { “vue”: “^2.1.10”, “vuetable-2”: “^1.0.1”, “vue-events”: “vue-2.x”, “vue-select”: “^2.1.0” }, “devDependencies”: { “del”: “^2.2.0”, “gulp”: “^3.9.1”, “gulp-sync”: “^0.1.4”, “webpack-stream”: “^3.2.0”, “gulp-autoprefixer”: “^3.1.0”, “gulp-babel”: “^6.1.2”, “gulp-concat”: “^2.6.0”, “gulp-if”: “^2.0.1”, “gulp-imagemin”: “^3.0.1”, “gulp-sass”: “^2.3.1”, “gulp-uglify”: “^1.5.3”, “yargs”: “^4.7.1”, “gulp-replace”: “^0.5.4”, “babel-core”: “^6.1.2”, “babel-loader”: “^6.1.0”, “babel-plugin-transform-runtime”: “^6.1.2”, “babel-preset-es2015”: “^6.18.0”, “babel-preset-stage-0”: “^6.1.2”, “babel-runtime”: “^5.8.0”, “webpack”: “^1.13.2”, “css-loader”: “^0.23.0”, “style-loader”: “^0.13.0”, “vue-loader”: “^7.3.0”, “vue-html-loader”: “^1.0.0”
}

I also use Bootstrap v4.0.0-alpha.6.

What am I doing wrong?

[hemulin]

Using Bootstrap 4.0.0-beta.2, the v-select element looked rather bad. The fix for me was a simple

.v-select {
  display: grid;
}

It is supported in modern browsers (not so much on IE)

[smatei]

Thank you @sagalbot !