标签: bootstrap-vue

我对Nuxt.js应用程序非常陌生，我正在尝试使用Nuxt.js and Vue.js. 在使用创建项目期间，Nuxt cli我添加了Bootstrap-vue.

我在Bootstrap modal创建方面面临一些问题，因此我想Bootstrap vue完全删除并将好的旧平原添加Bootstrap到我的应用程序中。我尝试根据此处找到的一些答案添加，但由于某种原因，它没有按预期工作，并且我的Modal没有正确显示drop-downs等。所以我的猜测是我没有正确从我的应用程序中删除并完全Bootstrap vue添加Bootstrap。

如果我在这里错过了一些东西，有人可以告诉我吗：

** 删除 Bootstrap-vue ***

1. npm i bootstrap-vue --save。
2. bootstrap-vue.js从文件夹中删除文件plugins。
3. plugin从......中去除nuxt-config.js：plugins: ["@/plugins/bootstrap-vue"],

** 安装旧版 Bootstrap ** 将以下 CDN 链接添加到我的nuxt-config.js文件中：

script: [
      {
        src: "https://code.jquery.com/jquery-3.6.0.min.js"
      },
      {
        src:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      }
]

link:[
      {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      },
      {
        rel: …

我正在使用 bootstrap vue table，并且我想将 bootstrap table 导出到 excel 或 pdf。它就像表中的表，我发现如何导出它以供下载为 excel 或 pdf 很困难，因为我遇到的其他解决方案都只涉及提供 json 数据，它可以工作，但不能'找不到关于我的问题的任何解决方案。

Codesandbox演示

<template>
  <div id="app">
    <b-button @click="exportTable" class="mb-3">Export</b-button>
    <b-table-simple outlined id="htmltable">
      <b-thead class="b-table__head">
        <b-tr>
          <b-th class="small-tab">Goods</b-th>
          <b-th>Units</b-th>
          <b-th>Price Per Unit</b-th>
          <b-th>Total Price</b-th>
        </b-tr>
      </b-thead>
      <b-tbody v-for="(service, index) in goodsGroupedByCategory" :key="index">
        <b-tr class="category-line">
          <b-th class="small-tab cs-textstyle-paragraph-small-bold">{{
            index
          }}</b-th>
          <b-td></b-td>
          <b-td></b-td>
          <b-th class="cs-textstyle-paragraph-small-bold">{{
            service.reduce(function (prev, curr) {
              return prev + curr.total_units * curr.price_per_unit;
            }, 0)
          }}</b-th>
        </b-tr>
        <b-tr
          v-for="serviceItem in service"
          :key="serviceItem.id"
          class="item-line"
        >
          <b-td class="big-tab cs-textstyle-paragraph-small">{{ …

Tailwind 使您可以在使用 Vite 设置的项目中轻松使用其 CSS，如您在此处看到的。

但是，Bootstrap 5 仅提供可用于Webpack 的信息。

我找不到任何关于如何使用 Vite 设置 Bootstrap 5 CSS 的信息。有人对如何使用 Vite 成功且最佳地设置 Bootstrap 5 有任何建议吗？我正在使用 Nuxt3，但使用哪个框架并不重要。

我知道这是一个非常具体的问题，但想知道是否有人可以帮助我。所以现在我正在使用位于此链接上的引导程序中的模块：

https://bootstrap-vue.js.org/docs/components/pagination/

我目前在尝试调度依赖于 currentPage 变量的操作时遇到麻烦。

<bPagination align="right" :total-rows="100" v-model="currentPage" :per-page="10" @click.native =" updatePage(currentPage); loadParticipants()"></bPagination>

目前 currentPage 设置为 1，如下所示：

 data() {
  return {
    currentPage: 1,
    tag: '',
    tags: [],
    ....

这是一种方法，可以让我更新 VueX 商店中的页面。首先，我在 Vue 文件中调度一个方法：

updatePage: function(page){ this.$store.dispatch('updatePage', page); console.log("Hit me") },

然后在我的 VueX 商店中我使用这个函数来提交：

updatePage({ commit }, updatePage) { commit('updatePage', updatePage); }

然后我使用突变来最终更新状态数据：

updatePage: (state, updatePage) => { state.page = updatePage; }

所以我想要它做的是，每次我点击页码时，当您按下任何页码时，我都会立即更新 vuex 存储中的页码。但是，每次我单击页码时，它都会减少和增加一步。

例子：

如果我点击第 2 页两次，它会将商店数据更新到第 2 页

如果您单击第 2 页，然后单击第 1 页，则会显示商店的页码位于第 2 页。

所以它几乎落后了一步。如果有人能把我推向正确的方向，那会有很大帮助。谢谢！

我使用 VueJS、Bootstrap Vue Table 和 Pagination 来显示分页的用户列表。数据似乎已正确加载，但分页的第 2 页未显示任何数据。

我有一个 Users 组件，它为 C 表引导组件传递必要的数据，如下所示：

用户.vue

<c-table
                :tableData="tableData"
                :fields="fields"
/>
<script>
import cTable from '../base/Table.vue'
import UserAPI from '../../api/user.js'
export default {
    created () {
        var vueComponent = this
        UserAPI.getUsers()
        .then(response => {
            if (response.data.success) {
                vueComponent.tableData = response.data.data
            } 
        })
    }
}
</script>

在表组件中，我尝试使用用户组件提供的数据来渲染分页表。

表.vue

<b-table
        :items="tableData.data"
        :fields="fields"
        :current-page="tableData.current_page"
        :per-page="tableData.per_page"
>
</b-table>

<nav>
   <b-pagination
     v-model="tableData.current_page"
     :total-rows="tableData.total"
     :per-page="tableData.per_page"
     prev-text="Prev"
     next-text="Next"
     hide-goto-end-buttons
    />
</nav>

<script>
export default {
    name : 'cTable',
    props: …

以下是 BootstrapVue 导航栏的使用方式https://bootstrap-vue.js.org/docs/components/navbar，但对于一个视图，我需要从导航栏向其传递一个 prop。

将其添加到原始 Vue 中非常容易，但 BootstrapVue 似乎没有解决方案。有人有任何线索吗？

这是一份工作副本，

<b-nav-item to="/login">register</b-nav-item>

我想把它改成这样：

<b-nav-item to="/login" :action="'register'">register</b-nav-item>

其中“action”是我需要传递的支柱。

我使用 Vue2 和 Boostrap-vue 来制作模态组件，这是代码

我通过了以下道具@backdrop="handleBackdrop"

<template>
<b-modal
    v-model="showModal"
    id="modal"
    @backdrop="handleBackdrop"
    @ok="handleBackdrop"
  >
...
</template>

<script>
data() {
    return {
      showModal: false
     }
},
  methods: {
    show() {
      this.showModal = true;
    },
    hide() {
      this.showModal = false;
    },
    handleBackdrop(ev) {
      ev.preventDefault();
      console.log("Click backdrop");
    }
}
</script>

我正在使用这个@ok来测试函数handleBackdrop并且它可以工作，但是我无法激活背景上的这个点击

我正在尝试使用bootstrap vue alert构建一个全局警报组件。我正在使用store 来保持警戒状态。vuex

<template>
  <b-alert show :variant="variant" dismissible> {{ message }} </b-alert>
</template>
<script>
export default {
  props: {
    variant: String,
    message: String
  },
  data() {
    return {};
  },
  name: "Alert",

  methods: {},
  computed: {}
};
</script>
<style scoped></style>

const alert = {
  namespaced: true,
  state: {
    variant: "",
    message: "",
    showAlert: false
  },
  getters: {
    variant: state => state.variant,
    message: state => state.message,
    showAlert: state => state.showAlert
  }, …