Components of Vuestrap not working with Vue2

2019-09-08 11:51发布

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?

0条回答
登录 后发表回答