bootstrap-vue组件呈现为注释

时间:2019-01-23 13:31:58

标签: vuejs2 vue-component bootstrap-vue

在我的vue项目中,一些bootstrap-vue组件可以很好地呈现,而其他组件则可以HTML注释形式呈现。在此示例中,这两个组件在Vue Dev工具面板中均显示良好。我添加了一个“普通”输入字段,只是看它是否可以正常显示。

<template>
    <div class="list-group">
        <div>Test</div>
        <b-form-input v-model="text1"
                      type="text"
                      placeholder="Enter your name"></b-form-input>
        <b-form-textarea id="textarea1"
                         v-model="text"
                         placeholder="Enter something"
                         :rows="3"
                         :max-rows="6"></b-form-textarea>
        <input type="text"/>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component
    export default class ProjectList extends Vue {
        text = 'text';
        text1 = 'text1';
    }
</script>

但是呈现为:

enter image description here

enter image description here

我希望在浏览器中看到两个输入字段,但是我只看到文本区域和“正常”输入字段。我在日志中看不到任何错误。我可能会缺少什么?

1 个答案:

答案 0 :(得分:0)

好的,我找到了解决方法:

代替导入:

import Vue from 'vue'    
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

我导入:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';

Vue.use(BootstrapVue);

现在一切正常。我不确定为什么在bootstrap-vue文档中描述了前者。也许是因为我正在使用TypeScript ..?