bootstrap-vue 组件呈现为注释

Posted 2023-02-23

【中文标题】bootstrap-vue 组件呈现为注释

【英文标题】：bootstrap-vue component renders as comment

【发布时间】：2019-06-17 02:46:24

【问题描述】：

在我的 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>

但是被渲染为：

我希望在浏览器中看到两个输入字段，但我只看到 textarea 和“正常”输入字段。我在日志中看不到任何错误。我会错过什么？

【问题讨论】：

这完全正常。这可能是因为那里有一个元素有条件地呈现它。

@Terry 感谢您的评论。你的意思是在 b-input 组件中？我在文档中没有看到：bootstrap-vue.js.org/docs/components/form-input。请注意，我的代码中没有 v-if。

VueJS就是这样工作的，跟bootstrap VueJS插件无关。

@Terry 啊……对不起。也许我的问题并不清楚，但我没有在浏览器中看到输入字段，只有文本区域可见。为什么我看到一个而没有另一个？我希望看到两者:-)

我注意到您将这些元素直接嵌套在 <ul> 中。 <ul> 的唯一有效直接后代是 <li>。尝试更新您的标记，看看是否有任何变化。

【参考方案1】：

好的，我找到了解决方案：

而不是导入：

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..？

【讨论】：

您好 Jens，我正在尝试使用 TypeScript 启动一个 vue 项目，但在合并 bootstrapVue 时遇到了困难。现在：import BootstrapVue from 'bootstrap-vue' 不起作用。所以我尝试从bootstrap-vue.esm 导入，但显示以下错误：找不到模块'bootstrap-vue/dist/bootstrap-vue.esm'的声明文件.....你有什么想法吗？请提供一个 bootstrap-vue+ts 项目的工作示例？谢谢。

@Ruhshan 我现在正在使用 BootstrapVue 指南中描述的方法，因为我最初的问题已经解决了。尝试删除您的 node_modules 文件夹并运行 npm install。我认为这成功了。