标签: bootstrap-vue

我将 Bootstrap Vue 与 Vue.js 结合使用，并且遇到了一个问题，即我正在迭代某些项目并将其显示给用户。

问题是，当用户单击其中一个弹出窗口时，每个打开的弹出窗口都会关闭（如我所愿），但是当用户单击目标（​​打开的）弹出窗口的焦点区域之外时，它不再关闭。

看起来每次用户单击目标弹出窗口时都会运行打开动画。

这是代码：

<template>
  <div>
    <div class="row" v-for="(n, i) in 5" :key="n">
      <div :id="'popover' + visitor.id + '-' + i" @click="$root.$emit('bv::hide::popover')">
        <div class="card">
          <b-popover :target="'popover' + visitor.id + '-' + i">
            <template slot="title">
              Edit image
              <button
                class="close-popover"
                @click="$root.$emit('bv::hide::popover', 'popover' + visitor.id + '-' + i)"
              >X</button>
            </template>
          </b-popover>
        </div>
      </div>
    </div>
  </div>
</template>

任何帮助表示赞赏！

我正在使用 Bootstrap Vue 创建我的轮播。轮播包含 3 张图像，允许用户循环浏览。我能够显示适合我的笔记本电脑屏幕尺寸的高度和宽度的图像。然而，当我慢慢地将屏幕尺寸缩小到移动设备时，高度不再是屏幕的高度。下面是我的代码和截图

更新：我仍然无法解决这个问题，有人可以帮我吗？

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://source.unsplash.com/LAaSoL0LrYs/1920x1080"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://source.unsplash.com/bF2vsubyHcQ/1920x1080">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://source.unsplash.com/szFUQoyvrxM/1920x1080"></b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}
      <br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>

<script> …

<div>
  <b-btn v-b-modal="'productModal'" class="more_details_button" @click="chooseProduct(product)" product_item="'product'">More Info</b-btn>
</div>

<b-modal v-if="chosenProduct" hide-footer="true" ok-title="Buy Now" modal-title="{{ chosenProduct.Name }}">...</b-modal>

这就是我上面的。我想更改模式标题的名称。 chosenProduct()是我的方法之一，Name也是我数据库中的一列。我不确定如何在 . 领域中表示我的数据库中的数据元素之一modal-title。我尝试过绑定它，但:modal-title="chosenProduct.Name"似乎没有任何作用。希望得到一些帮助。谢谢！

我正在一个项目中使用bootstrap-vue 表，但遇到了没有文档的问题。

如何同时切换 1 行详细信息？

这里有一个完整的表格示例，其中包含数据的表格

我正在尝试更改项目中的“主要”、“危险”、“信息”等主题颜色。我使用 bootstrap-vue。我尝试更改node_modules中bootstrap文件夹中的variables.sass文件，但没有任何反映。我查看了主题文档，但我似乎无法理解它，或者不知道我应该做什么。他们的示例看起来与 CLI 4 的脚手架项目完全不同。我应该创建自定义 sass 文件、安装 sass 加载程序并导入它吗？

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './assets/main.css';
import routes from './routes';


Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(BootstrapVue);

const router = new VueRouter({mode: 'history',routes});

new Vue({
  router,
  render: h => h(App)

}).$mount('#app')

应用程序.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
@import 'assets/main.css';
@import 'assets/custom_scss.scss';
</style>

我有这个 Vue 代码：

<b-input-group >
   <b-form-checkbox-group id="boxes"
      v-model="selectedBoxes"
      :options="boxes"
      name="boxes"
      stacked />
</b-input-group>

// my data() includes returning:
boxes: ['1', '2', '3', '4', '5', '6'],
selectedBoxes: [],

生成此渲染（由于stacked）。我更喜欢将复选框设置为两个宽，仅堆叠三个。是不是很容易新手（Vue新手）？

我正在尝试打印联赛表，但团队部分位于嵌套对象中。如何连接到该对象，然后将它们放入team.name、team.crest的表格单元格中？我在这里看到了答案，但我似乎仍然无法打印出数组内的嵌套团队对象。

我尝试使用 :fields 属性，但它不起作用。我被困住了。

Data from console.log:

    [{
    draw: 1
    goalDifference: 23
    goalsAgainst: 14
    goalsFor: 37
    lost: 0
    playedGames: 15
    points: 43
    position: 1
    team: { "id": 64, "name": "Liverpool FC", "crestUrl": "http://upload.wikimedia.org/wikipedia/de/0/0a/FC_Liverpool.svg" }   
  }]

<template>
  <b-container>
    <b-table striped hover :fields="fields" :items="info">
      <template v-slot:cell(name)="data">{{ data.value.team.name }}</template>
    </b-table>
  </b-container>
</template>

data() {
    return {
    fields: [
      { key: 'info.team.name', label: 'Team Name' },
    ],
      info: [],
}

构建一个 bootstrap-vue 手风琴，一切都按预期工作，但是，我刚刚添加了展开所有/折叠所有按钮，这些按钮也按我的预期工作，但现在我的问题是，当我直接单击任何手风琴面板时，它们都会打开。有没有办法让他们只打开单击的面板？

html:

   <div class="container container-accordion-one">
      <!--expand all / collapse all row -->
      <div class="row row-expand-collapse">
        <div class="offset-md-1 col-expand-collapse">
          <ul class="list-expand-collapse">
            <li><a href="#/" @click="showCollapse = true" class="font__card-body">Expand All</a></li>
            <li><a href="#/" @click="showCollapse = false" class="font__card-body">Collapse All</a></li>
          </ul>
        </div>
      </div>
      <!--end: expand all / collapse all row -->
      <div class="row">
        <div class="offset-md-1 accordion-style-one">
          <div role="tablist">
            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-1 header-tag="header" class="accordion-header" role="tab">
                <p class="font__accordion-header">Accordion 1</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-1" v-model="showCollapse" …

我尝试用引导示例更改它，但失败了。

        <b-pagination
            v-model="currentPage"
            :total-rows="users.length"
            :per-page="perPage"
            align="fill"
            size='lg'
            first-number
            last-number
            class="my-0"
        ></b-pagination>

我正在尝试在我的 vue-cli 项目中安装 bootstrap-vue。我在这里阅读https://bootstrap-vue.js.org/docs：

Then, register BootstrapVue in your app entry point:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
And import Bootstrap and BootstrapVue css files:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Alternatively you can import Bootstrap and BootstrapVue scss files in a custom SCSS file:

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
Make sure to import the custom.scss file in your app entry point:

import …