标签: bootstrap-vue

这似乎仍然没有答案，所以这里是另一种解决方案的尝试。

目前在 bootstrap-vue 中，我正在渲染一个 b-table. 我想通过能够选择一行并折叠/展开额外的 div/row/etc 以显示更多信息来改进这一点。

在下面的片段中，您将看到我正在尝试的内容。问题是我似乎无法获得扩展数据以跨越表中的列数。我试过添加，<tr><td colspan="6"></td></tr>但它似乎没有像我期望的那样跨越。任何解决方法？谢谢。

<b-table
    :items="case.cases"
    :fields="tableFields"
    head-variant="dark">
    <template
        slot="meta.status"
        slot-scope="data">
    <b-badge
        v-b-toggle.collapse1
        :variant="foobar"
        tag="h6">
        {{ data.value }}
    </b-badge>
    </template>
    <template
        slot="@id"
        slot-scope="data">
        <span
            v-b-toggle.collapse1>
            {{ data.value }}
        </span>
        <b-collapse id="collapse1">
            Collapse contents Here
        </b-collapse>
    </template>
</b-table>`

我有一个带有 bootstrap-vue 项目的 VueJS。一个选项卡列表被渲染，但它大于父级的宽度。所以我想要一对按钮从左到右滚动列表。

我找到了这个例子，我在自己的项目中工作。 在 VueJS 中使用按钮进行水平滚动 但我无法让它与选项卡一起使用。

在我针对 .nav-tabs 的方法中，因为这是一个呈现给 DOM 的类。我试图用 .$refs 找出它，但无法到达实际元素，因为该元素仅在渲染后可见。

有人可以帮助让标签滚动。

https://jsfiddle.net/timmyl/xg8j7knb/19/

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
    <b-row>
      <button @click="scroll_left">Scroll Left</button>
      <button @click="scroll_right">Scroll Right</button>
    </b-row>
  </div>
</div>

methods: {
     scroll_left() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft -= 50;
    },
    scroll_right() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft += 50;
    }

.tab-panel {
  flex-wrap: nowrap;
}

.wrap {
  overflow: hidden; …

我将 b-form-select 与服务器端生成的选项标签一起使用：

        <b-form-select :state="errors.has('type') ? false : null"
                       v-model="type"
                       v-validate="'required'"
                       name="type"
                       plain>
            <option value="note" >Note</option>
            <option value="reminder" >Reminder</option>
        </b-form-select>

当没有为此字段设置数据时，我想自动选择列表中的第一个选项。

这可能吗？我还没有找到如何从我的 Vue 实例中访问组件的选项。

所以我有一些包含b-form-input组件的代码，我正在测试该组件是否呈现。我正在使用wrapper.find({name: "b-form-input"}).exists()来确定该 bootstrap vue 组件是否存在。但是，当我知道组件正在渲染时，此函数会不断返回 false。我可以就如何正确执行此操作提供一些帮助吗？

我正在创建一个网站并使用 boostrap-vue 在屏幕顶部添加一个导航栏。导航栏的右侧将包含一个名为“Lang”的下拉菜单。我希望“Lang”文本为黑色。文本当前为白色，我找不到更改它的方法。

我尝试了以下 css 代码，它改变了我的导航栏项目的颜色，但“Lang”保持相同的白色/灰色。

.dropdown {
color: #000!important; 
}

.navbar-dark .navbar-nav .nav-link {
    color: #000!important;
}

这是我的导航栏的代码：

    <b-navbar class="w-50 mx-auto" toggleable="lg" type="dark" variant="info" :sticky="true" bg-foobar>
    <!--<b-navbar-brand href="#">NavBar</b-navbar-brand>-->
    <b-img :src="require('../assets/BlueLogoPNG.png')" class="logo"></b-img>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="ml-auto" >
        <b-nav-item href=""><b>Planet Pluto</b></b-nav-item>
        <b-nav-item href="#"><b>About Us</b></b-nav-item>
        <b-nav-item href=""><b>Support</b></b-nav-item>
        <b-nav-item href="#"><b>Credits</b></b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items-->
      <b-navbar-nav class="ml-auto">

        <b-nav-item-dropdown toggle-class="nav-link-custom" text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
    <BNav/>

  </div>

我可以通过 .dropdown 类控制背景颜色，但不能控制颜色。Lang 文本需要是颜色代码 …

我正在尝试使用可与 vue-router 一起使用的 bootstrap-vue 制作导航栏。导航栏运行正常，但是当我单击导航栏项目时，它不会将我路由到该页面。在我合并 bootstrap-vue 之前，路由器正在工作，所以我猜我错过了一些与 bootstrap 相关的东西？有任何想法吗？

导航栏.vue :

<template>
    <div>
        <b-navbar 
            toggleable="lg"
            type="light"
            variant="light"
        >
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-link
                        active-class="active"
                        class="nav-link"
                        v-for="routes in links"
                        :key="routes.id"
                        :to="routes.path"
                    >
                        <b-nav-item>
                            {{ routes.name }}
                        </b-nav-item>
                    </b-link>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>

        <router-view></router-view>
    </div>
</template>

<script>

export default {
    name: 'Navbar',
    data() {
        return {
            links: [
                {
                    id: 0,
                    name: 'Home',
                    path: '/',
                },
                {
                    id: 1,
                    name: 'RSVP',
                    path: '/RSVP',
                },
                {
                    id: 2,
                    name: 'Pictures',
                    path: '/pictures', …

如何更改 b-dropdown-component 中 b-dropdown-item-button 的行为，使其在单击时不会自动关闭？

下拉菜单的语法结构如下：

<b-dropdown>
    <b-dropdown-item-button>
        <span>Mark as read</span>
    <b-dropdown-item-button>

    <b-dropdown-group>
// Messages are output here
    </b-dropdown-group>
</bdropdown>

现在我想知道如何在单击 b-dropdown-item-button 时防止下拉菜单关闭。

如果当前用户是管理员，我只想显示我的一栏。我不确定如何使用 bootstrapVue 执行此操作。有任何想法吗？

工具提示框立即消失。

<p id="tooltip_target_tags">Some text</p>
<b-tooltip target="tooltip_target_tags" placement="top" triggers="hover">
    <!-- CONTENT -->
</b-tooltip>

我正在使用https://bootstrap-vue.org/docs/reference/validation#vuelidate，我遇到了

:state 作为 vue 属性。

我没有在文档中找到任何东西，我很困惑。它来自哪里，它有什么作用？实际上似乎我需要使用它来验证输入字段。但我宁愿使用@blur 而不是 state，但它不起作用。