标签: bootstrap-vue

我是 Vuejs 的新手，我收到错误未知的自定义元素 -

我如何注册自定义元素 - b-alert。我认为这个元素来自 bootstrapVue。

<template>
<div>
 <b-alert show>Default Alert</b-alert>



  </div> 
   </template>

    <script>
   export default {
    data () {
            return {
                 dismissSecs: 10,
                 dismissCountDown: 0,
                 showDismissibleAlert: false
            }
    },
                  methods: {
             countDownChanged (dismissCountDown) {
                     this.dismissCountDown = dismissCountDown
             },
             showAlert () {
                     this.dismissCountDown = this.dismissSecs
             }

     },

}

我想动态呈现vue-bootstrap的模式，而不是通过编写任何html代码。我提到了文档-https: //bootstrap-vue.js.org/docs/components/modal/#modal-message-boxes并将其应用于我的vue项目中，但是当我尝试调用时，它给了我一个错误bvModal.msgBoxOk（'sad'）-

vue.runtime.esm.js?ff9b:587 [Vue warn]: Property or method "$bvModal" is 
not defined on the instance but referenced during render. Make sure that 
this property is reactive, either in the data option, or for class-based 
components, by initializing the property. See: 
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

我试图在的jsfiddle和工作，但它不是我的项目工作- https://jsfiddle.net/yrb4tcfm/11/

这是我的main.js

    import 'babel-polyfill'
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import BootstrapVue from 'bootstrap-vue'
    import store from './store/store'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    import Modal from 'bootstrap-vue/es/components/modal'


    Vue.use(BootstrapVue)
    Vue.use(Modal)

    new Vue({
      el: …

我想实现一个分页组件 b-pagination w/bootstrap-vue 但它只会显示第一页。我正在遵循文档中的设置，但它们只显示了一个使用表格而不是无序列表的示例。我有 ：

<template>
  <div class="results overflow-auto" v-cloak>
    <h3>Search Results</h3>

    <modal v-if="showModal" @close="showModal = false">
      <!--
      you can use custom content here to overwrite
      default content
      -->
      <template v-slot:header>
        <h1>NASA Image</h1>
      </template>

      <template v-slot:body>
        <b-img class="modal-image" v-bind:src="attribute"></b-img>
      </template>
    </modal>

    <!-- ======== Pagination Markup  ============ -->
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      :items="items"
      aria-controls="my-list"
    ></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <!-- ==========End Pagination Markup ======== -->

    <!-- Limit output to 100 items -->

    <ul
      class="search-results"
      id="my-list"

    >
      <li v-for="(item, index) …

我正在按照VueBootstrap 主题指南为 BootstrapVue 2.0（使用 Bootstrap 4.3）构建一个主题。我有一个theme.scss文件，它在开头有我的覆盖并在最后导入基本样式。我正在尝试覆盖默认的容器水平填充，但它似乎不起作用。

主题.scss

$container-padding-x: 30px !default;

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

容器左侧和右侧的填充保持默认值15px。

此外，如果我尝试覆盖装订线宽度，它会起作用并且更改甚至会调整容器填充，因为容器填充是装订线宽度的一半。

$grid-gutter-width: 60px !default;

为什么与变量覆盖存在差异？

我目前正在尝试向此 Vue Bootstrap 表单复选框组添加换行符。Vue Bootstrap 文档的示例（https://bootstrap-vue.js.org/docs/components/form-checkbox/展示了如何创建全选复选框组，但它们紧密分组（没有换行符）。有没有一种方法可以在风味数组中添加换行符来分隔每个对象？

我尝试在 div 标签上使用 v-html 并加载到flavors 数组中，但没有得到正确的结果。我也尝试过 :style="{marginBottom:'25px'}" 但它也不起作用，整个数组组一起在页面上上下移动。从那以后我就失去了理想。

超文本标记语言

<template>
  <div>
    <b-form-group>
      <template slot="label">
        <b>Choose your flavours:</b><br>
        <b-form-checkbox
          v-model="allSelected"
          :indeterminate="indeterminate"
          aria-describedby="flavours"
          aria-controls="flavours"
          @change="toggleAll"
        >
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        </b-form-checkbox>
      </template>

      <b-form-checkbox-group
        id="flavors"
        v-model="selected"
        :options="flavours"
        name="flavors"
        class="ml-4"
        aria-label="Individual flavours"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong><br>
      All Selected: <strong>{{ allSelected }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
  </div>
</template>

JavasScript

<script>
  export default {
    data() {
      return { …

表中的作用域字段槽有一个新语法，请参阅https://bootstrap-vue.js.org/docs/components/table#scoped-field-slots，它看起来像

<template v-slot:cell(myColumn)="data">
...

wheremyColumn被解释为字符串 - 字段中的字段键，以显示在我们的表中。

如何使用变量而不是字符串？让我们说一下：

let myColumnName = "myColumn";

<template v-slot:cell(myColumnName)="data">
...

我对 vue.js 很陌生，但我可以弄清楚一些事情。我从普通的 js 开始，但现在切换到带有类样式 vue 组件的 typescript。对于组件样式，我使用 bootstrap-vue。

在我的 main.ts 文件中，我导入了 bootstrap 以及 vuex 商店

...
import BootstrapVue from 'bootstrap-vue'
//use custom bootstrap styling
import '../src/bootstrap/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

...//some more code

new Vue({
 router,
 store,
 i18n,
 render: h => h(App)
}).$mount('#app')

在商店中我动态注册了一个 NotificationModule

通知模块.ts

//import node modules
import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";
import { store } from "@/store";

//import application modules
import i18n from '@/i18n';

import Notification from '../types/Notification';
import Message from '../types/Message';
import …

我想为 bootstrap-vue 表实现一个双页脚。

<b-table
    striped hover
    :items="items"
    :fields="visibleFields"
    :sort-compare="sortCompare"
    :sort-by.sync="sortBy"
    foot-clone
    selectable
    select-mode="single"
    @row-selected="onRowSelected"
    :tbody-tr-class="rowClass"
    >

    <!-- Footers total nutritional values -->
    <template v-slot:foot(serving)="data">
        <span>Total:</span>
    </template>
</b-table>

该表如下所示：

Bootstrap vue文档仅提供此内容来创建页脚：

<!-- Footers total nutritional values -->
<template v-slot:foot(serving)="data">
    <span>Total:</span>
</template>

问题是我不知道如何添加第二个页脚。另一种方法是在表格下方添加一个 div 并显示我想要的内容，但我认为有一种更简洁的方法可以做到这一点。

在我的 nuxt.js bootstrap-vue 项目中：

我按照github使用引导程序图标： 链接

我的代码：

      <b-icon variant="success" icon="arrow-up"></b-icon>
      <b-icon variant="success" icon="alert-triangle"></b-icon>

      <b-icon icon="alert-circle-fill" variant="success"></b-icon>

      <h2 class="group_title">Anime Wallpapers</h2>

...

<script>

  import { BIcon, BIconArrowUp } from 'bootstrap-vue'

  export default{
    data(){
      return {
        msg: 'hello vue'
      }
    },
    components: {
      BIcon
    }
  }
</script>

但没有显示出来：

在我的 Vue Bootstrap (v2.21.2) Web 应用程序中，我想使用 Toast 向用户显示一些错误。这些错误是由 REST-API 客户端产生的。在我的 vb-components 中，我捕获这些错误并调用一个函数，该函数本身使用https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast()来动态创建和显示错误消息。正如预期的那样，吐司已创建，但会立即再次隐藏。我尝试禁用自动隐藏属性并尝试设置超时，但没有效果。由于我在某些子组件中调用此函数，因此我也尝试调用，this.$root.$bvToaster.toast()但 toast 仍然只显示大约 100 微秒左右。

我的项目的相关（减少）代码摘录：

应用程序.vue：

<template>
  <div id="app">
    <Navbar @viewChanged="view = $event;" />
    <Pki v-if="view == 'pki'" />
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Pki from './components/Certificates'
export default {
  data() {
    return {
      view: null
    }
  },
  name: "FooBar",
  components: {
    Navbar,
    Pki
  },
};
</script>

证书.vue：

<template>
    <!-- ... -->
</template>

<script>
    // ...
    mounted() {
      this.getCertificates();
    }, …