In a single file component in the project created by vue-cli, i want to import some components of vuestrap:
import Vue from 'vue'
import alert from 'vue-strap/src/alert'
import dropdown from 'vue-strap/src/Dropdown'
export default {
name: 'todo',
components: {
alert, dropdown
},
data() {
return {
msg: '...'
}
}
}
If I only import alert, it is working without any problem. However, if I import Input
, Dropdown
, i get errors inside the vue files of the vuestrap files itself:
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5f7de981!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-strap/src/Dropdown.vue
Vue template syntax error:
v-else used on element <ul> without corresponding v-if.
@ ./~/vue-strap/src/Dropdown.vue 9:2-143
@ ./~/babel-loader/lib!./src/components/todolist/todolist.js
@ ./src/components/ToDo.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5f7de981!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-strap/src/Dropdown.vue
Vue template syntax error:
class="btn btn-{{type}} dropdown-toggle": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
@ ./~/vue-strap/src/Dropdown.vue 9:2-143
@ ./~/babel-loader/lib!./src/components/todolist/todolist.js
@ ./src/components/ToDo.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
For some components the build is completely crashed (e.g. Datepicker
).
My question is: is Vuestrap not compatible with Vue2 as they said in the documentation? Or am I missing something?