在我的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>
但是呈现为:
我希望在浏览器中看到两个输入字段,但是我只看到文本区域和“正常”输入字段。我在日志中看不到任何错误。我可能会缺少什么?
答案 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 ..?