时间戳

首页 > 解决方案 > 从 CDN 加载的 VUE 中未显示徽章

javascript - 从 CDN 加载的 VUE 中未显示徽章

问题描述

我有一个 VUE 页面，我尝试在其中呈现徽章。它显示文本，但只有白色。我也尝试使用具有相同结果的引导徽章。

这是页面的代码：

<!DOCTYPE html>
<html>
<head>

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>

<body role="document">
    <div class="panel-body">
        <div id="start">
                <h2>b-badge: <b-badge variant="primary">b-badge</b-badge> {{foo}} </h2>
                class: <span class="badge">span</span>
        </div><!-- start -->
    </div>
    <script src="/js/vue/start.js"></script>
</body>
</html>

这是之前从 start.js 加载的带有 VUE 代码的 javascript。

var start = new Vue({
    el: '#start'
    ,
    data: {
        foo: "bar"
    }
});

VUE 加载是因为我在页面中发现了foo变量的结果。但是无论我尝试加载什么类，徽章都只会显示白色文本。使用 bootstrap 和 bootstrap-vue。

这是呈现的内容：

徽章呈现为白色文本

如果我选择文本，我可以看到徽章应该在的地方有一个白色文本。

我尝试了许多其他 VUE 代码，一切正常，包括导航栏。我也尝试导入獾，但我无法做到。我只得到那个错误：

"import declarations may only appear at top level of a module"

我的猜测是，当我使用 CDN 加载的 VUE 时，我不需要进行导入。我还搜索了是否必须从标题处的另一个链接加载 Badge javascript 或 CSS，但我无法在任何地方找到它。

有什么提示吗？非常感谢你。

标签： javascriptvue.js

解决方案

您要导入的 Bootstrap 版本的问题。以下行

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />

将导入几周前发布的最新版 Bootstrap，即 Bootstrap 5。

而 BootstrapVue 目前是为 Bootstrap 4.5.3 构建的。

因此，如果您将导入更改为专门导入版本4.5.3，它应该可以正常工作。

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.css" />


new Vue({
  el: "#start",
  data() {
    return {
      foo: "bar"
    }
  }
})
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

<div id="start">
  <h2>b-badge:
    <b-badge variant="primary">b-badge</b-badge> {{ foo }} </h2>
  class: <span class="badge">span</span>
</div>

推荐阅读