标签: bootstrap-vue

我有这个按钮元素：

<button v-on:click="changeRecord(element)" v-b-modal.modal-5>Aendern</button>

它是在 v-for 循环内动态生成的。我不想像上面那样对属性名称进行硬编码，而是v-b-modal.modal-5想像这样连接它：

v-b-modal.modal-{{index}}

有没有办法做到这一点？我正在使用 vue-cli 3 和 bootstrap-vue。

我正在使用此代码进行下拉：

<b-dropdown size="sm" text="Update" split class="m-2">
                    <b-dropdown-item-button>Action</b-dropdown-item-button>
                    <b-dropdown-item-button>Another action</b-dropdown-item-button>
                    <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
                  </b-dropdown>

如何动态更新“文本”项？

我在 Vue 项目中使用 Bootstrap-Vue 组件，并将 Accept 属性设置为“image/*”。它与浏览按钮配合得很好，但我仍然可以将所有类型的文件拖放到文件表单中并且它接受它。这是一个错误还是我错过了什么？

<b-form-file
   accept="image/*"
   v-model="file"
   :state="null"
   placeholder="Choose a file or drop it here..."
   drop-placeholder="Drop file here..."
></b-form-file> 

我每行都有一个删除按钮，我需要log_id从 items 中获取数据以传递给 function deleteLog。该功能始终提醒的log_id是undefined。

如果没有 ，我如何传递log_id给函数？deleteLogundefined

<template>
    <b-table striped hover :items="items" :fields="fields">
        <template v-slot:cell(Delete)>
            <b-button variant="danger" v-on:click="deleteLog(log_id)">Delete</b-button>
        </template>
    </b-table>
</template>

<script>
export default {
    data() {
        return {
            fields: ['Year', 'Month', 'Round', 'Name', 'Delete', 'log_id'],
            items: []
        }
    }
}
</script>

我有多个视图，我想保存每个视图的状态，这样用户就不必再次执行相同的操作。

在其中一个上，我有一个表，并使用引导分页组件进行分页，因此当用户更改页面时，我将请求发送到服务器以获取新数据。我在 Vuex 中存储排序和过滤参数，效果很好。

但是当我想像这样保存当前页面时，每次更改视图并返回时，bootstrap-pagination 都会将其更改为 1。是否可以阻止这种行为？

以下是 HTML 代码：

<b-pagination v-if="currentPage!=-1"
            v-model="currentPage"
            :total-rows="totalRows"
            :per-page="perPage"
            aria-controls="my-table"
            pils
            align="center"
            class="ml-auto mr-auto"
          ></b-pagination>

和 JavaScript 代码：

  data: function () {
      return {
        ...
        currentPage: this.$store.state.currentPage,
        ...
      }
    },

    ...

    watch: {
        currentPage: function(){
                this.$store.commit('updateCurrentPage', this.currentPage);
                this.getData();
              },
    }

我知道我们可以<b-table>使用 使列可排序:sort-by="sortBy"。但是我怎样才能告诉它只按开头的特定列对表进行排序，并且也按降序排列呢？

我尝试了以下方法，但这不起作用。

<b-table
....
:default-sort="TheColumnToSort"
:default-sort-direction="desc"
....
>

我想隐藏下拉箭头和按钮颜色，我正在使用vue-bootstrap. 有没有其他方法可以用来在navbar没有箭头和按钮颜色的情况下制作下拉菜单？我已经尝试了很多方法，但似乎我所做的每一个样式都不起作用vue-bootstrap

<b-dropdown
id="dropdown-left"
text="RECIPE"
ref="dropdown"
class="m-md-2">
   <b-dropdown-item>A</b-dropdown-item>
   <b-dropdown-item>B</b-dropdown-item>
</b-dropdown>

并且有包的来源：dropdown-bootstrap

我对 vue 非常陌生，对于这个项目，我使用 Vue、Bootstrap-vue 来对我的数据 teamList 进行分页。有没有一种方法可以将 更改teamList.first_name为链接，以便onSelect or onClick在用户单击first_name 值后我可以使用事件。

JsFiddle 上的代码= https://jsfiddle.net/ujjumaki/aLdgo7xq/8/

看法

<div class="overflow-auto">
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
    <p class="mt-3">Current Page: {{ currentPage }}</p>
    <b-table id="my-table" :items="teamList" :per-page="perPage" :current-page="currentPage" medium selectable>
    </b-table>
</div>

JavaScript

data(){
  return{
    teamList: [
          { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
          { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
          { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
          { id: 8, first_name: 'Rockhead', last_name: 'Slate' …

使用 bootstrap-vue 的 vb-tooltip.hover 时，单元测试不断发出警告：
[BootstrapVue warn]: tooltip - 提供的目标不是有效的 HTML 元素。

当表单进入视图时，我们不应该对表单进行验证。
用户与输入进行交互后，应激活其验证。