标签: bootstrap-vue

我正在尝试添加一个取消按钮，与定义重置按钮的方式相同，但它不会触发该方法并且仍会执行验证（必需的字段）

我在我的和 onCancel(evt) 方法中添加了 @cancel="onCancel" 属性，该属性不会因为没有控制台输出而执行...

新用户.vue

    <template>
      <div id="createUserForm">
        <h2>New User Form</h2>
        <b-form @submit="onSubmit" @reset="onReset" @cancel="onCancel" v-if="show">
          <b-form-group id="userInputGroup1"
                        label="Email address:"
                        label-for="emailInput"
                        description="We'll never share your email with anyone else.">
            <b-form-input id="emailInput"
                          type="email"
                          v-model="form.email"
                          required
                          placeholder="Enter email">
            </b-form-input>
          </b-form-group>
          <b-form-group id="userInputGroup2"
                        label="Your First Name:"
                        label-for="firstNameInput">
            <b-form-input id="firstNameInput"
                          type="text"
                          v-model="form.firstName"
                          required
                          placeholder="Enter first name">
            </b-form-input>
          </b-form-group>
          <b-form-group id="userInputGroup3"
                        label="Your Last Name:"
                        label-for="lastNameInput">
            <b-form-input id="lastNameInput"
                          type="text"
                          v-model="form.lastName"
                          required
                          placeholder="Enter last name">
            </b-form-input>
          </b-form-group>
          <b-form-group id="userInputGroup4"
                        label="Gender:"
                        label-for="genderInput">
            <b-form-radio-group id="genders" v-model="gender" :options="genderOptions" …

我正在尝试向使用Bootstrap-Vue的下拉菜单组件添加一些自定义样式。我在这里使用文档。

这是我的模板：

<div class="container">
  <b-dropdown id="dropdownMenuButton" text="Dropdown Button" no-caret class="custom-dropdown">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

我发现我可以设置#dropdownMenuButton的样式，但是当下拉列表在浏览器中呈现时，它会在#dropdownMenuButton内创建一个元素，而我无法设置样式。我尝试这样做：

<style scoped>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

但是没有运气。仅供参考，要创建的按钮的ID为dropdownMenuButton__BV_toggle_。

我正在使用 VueJS，或者更准确地说Bootsrap-Vue (select form type)。在模板中，我有以下代码：

<b-form-select>                   
  <option v-for="(selectOption, indexOpt) in item.select.options" 
         :selected="selectOption == item.select.selected ? 'selected' : ''"
         :key="indexOpt"
         :value="selectOption"
  >
    {{ selectOption }} - {{ selectOption == item.select.selected }}
  </option>
</b-form-select>

其中对应的数据定义为：

let item = {
  label: "some text goes here",
  inputType: 'text',
  select: {
      selected: '15',
      options: [
         '5',
         '10',
         '15',
         '20'
      ]
  }
}

从 UI 的输出中，我们可以看到条件被正确评估（检查项目“15”的条件返回“true”）。选择控件如下所示：

如果我检查 HTML，它看起来像：

但是，我在这里需要的是，为了能够在加载控件期间，将传递的参数传递到“ item.select.selected ”中，以实际显示要预选的选择控件中的哪个选项（在页面加载时）。在我尝试的许多选项中，我的选择控件在页面加载时没有被选中。

有没有办法实现这一目标？

我有一个名为"List"的组件,其中包含一个vue boostrap表:

<template>
  <div>
    <b-table :items="items">
      <!--<template slot="createdAt" slot-scope="row"> usually vue boostrap table row templates live here-->
        <!--{{row.item.createdAt|dateFormatter}}-->
      <!--</template>-->
      <slot name="tableTemplates"></slot> <!-- but i want to pass the templates from my parent template -->
    </b-table>
  </div>
</template>

我从父组件"Orders"传递表项.我还想将行模板传递给vue boostrap b-table组件.

不幸的是我无法使用插槽工作(这将是模板内的模板)

<template>
  <div>
    <list :items="items">
      <template slot="tableTemplates">
        <!--templates inside templates do not work-->
        <template slot="id" slot-scope="row">
          <span v-b-tooltip.hover :title="row.item.id">{{row.item.id|uuidFormatter}}</span>
        </template>
        <template slot="createdAt" slot-scope="row">
          {{row.item.createdAt|dateFormatter}}
        </template>
        <template slot="customer" slot-scope="row">
          {{row.item.customer}}
        </template>
      </template>
    </list>
  </div>
</template>

用 Nuxt 学习 Vue。想要根据页面滚动位置更改导航栏类。

看着几个 地方，但还没有找到一个有效的解决方案。

这是我必须使用的：

``` default.vue
<template lang="pug">
div(v-on:scroll="shrinkNav", v-on:click="shrinkNav")
  b-navbar.text-center(toggleable="sm" type="light" sticky v-b-scrollspy)
    #myNav.mx-auto.bg-white
      b-navbar-toggle(target="nav_collapse")
      b-navbar-brand.mx-auto(href="#") 
        | Example.org
      b-collapse#nav_collapse.mx-auto(is-nav='')
        b-navbar-nav(justified, style="min-width: 600px").vertical-center
          b-nav-item.my-auto(href='#home') Home
          b-nav-item.my-auto(href='/how') How
          i.fab.fa-earlybirds.fa-2x.mt-2.mb-3
          b-nav-item.my-auto(href='/values') Values
          b-nav-item.my-auto(href='/join-us') Join Us
  #content.container(v-on:scroll="shrinkNav", v-on:click="shrinkNav")
nuxt
    nuxt
</template>

<script>
  // resize navbar on scroll
  export default {
    methods: {
      shrinkNav() {
        var nav = document.getElementById('nav')
        var content = document.getElementById('content')
        if (nav && content) {
          if(content.scrollTop >= 150) {
            nav.classList.add('shrink')
          } else {
            nav.classList.remove('shrink')
          }
        } …

我在我的应用程序中添加了一个 Bootstrap Vue 表，并希望在用户使用内置分页切换到另一个页面时进行记录。

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

为此，我添加了一个@change应该监听和记录分页的 v 模型的currentPage. 但是，它似乎是在currentPage实际更新之前调用的。

我如何才能正确收听此更新？

这是我尝试过的：https : //jsfiddle.net/eywraw8t/394424/

new Vue({
  el: "#app",
  data: {
   totalRows: 50,
   perPage: 10,
   currentPage: 1
  },
  methods: {
  	pagination() {
    	console.log(this.currentPage);
    },
  }
})

<div id="app">
  <div>
    <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" @change="pagination" />
  </div>
</div>

我正在尝试使用此处找到的 bootstrapVue 表

如果我完全使用他们的示例，则该表效果很好。

  <b-table striped hover :items="items"></b-table>

但是一旦我使用

<b-table striped hover :fundingInstructions="fundingInstructions"></b-table>

我的表没有显示，当我查看开发工具时，我看到我的表对于我从 api 返回的每个对象都有 [object,Object]。 如果我控制台记录我的数据，我会看到一个包含多个对象的数组 []。如何让表格显示我的数据？

 const items = [
  { isActive: true,  date:'10/20/2018', amount:'$4568.00', city:'FL Palm Beach' },
  { isActive: false,  date:'10/21/2018', amount:'$789.23', city:'FL Daytona Beach' },
  { isActive: false,  date:'10/21/2018', amount:'$999.99', city:'FL Key West' },
  { isActive: true,  date:'10/22/2018', amount:'$589.00', city:'FL Deltona' }
]

 export default {
    data() {
      return {
        fundingInstructions : [],
         fields: [ 'subMerchantName', 'fundsTransferId', 'amount' ,'accType', 'submitDate' ],
        items: …

我正在使用Maisonette Bootstrap主题开发的早期Django + Vue网站上工作。网站的一部分是常规Django渲染的模板，网站的一部分是单页应用程序。

我的任务是使Vue单页应用程序的导航栏与Maisonette主题中的导航栏匹配。在我开始工作之前，Vue SPA已设置为使用Bootstrap-Vue。

我的第一个想法是将Django模板代码复制到Vue模板中，但这根本不起作用（我不确定为什么）。看来我必须使用Bootstrap-Vue标记才能进行此工作。

但是，我现在遇到一个问题，试图使dropdown-activator（？）链接（？）看起来相同，并且由于Bootstrap-Vue创建下拉链接的方式，这似乎是不可能的。

我想使SPA看起来像这样（图片取自网站的Django部分）：

...在Django模板中使用以下代码：

    <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
       class="dropdown-toggle nav-link">
      <span class="user-name">{{ user.get_username }}</span>
      <span class="angle-down s7-angle-down"></span>
    </a>

...但是在Bootstrap-Vue中，我似乎只能访问此标记：

            <b-nav-item-dropdown text="Navigation" right>

...最终在SPA中看起来像这样：

因此，Bootstrap-Vue标签的工作方式似乎使得无法添加下角跨度。

有没有办法做到这一点？

Django导航栏的完整代码：

{% extends 'base.html' %} {% load static %} {% block nav %}
<nav class="navbar navbar-expand navbar-dark mai-top-header">
  <div class="container">
    <a href="#" class="navbar-brand"></a>
    <!--Left Menu-->
    <ul class="nav navbar-nav mai-top-nav">
      <li class="nav-item">
        <a href="/" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>
      </li>
    </ul>
    <!--User Menu-->
    <ul …

我正在使用 bootstrap-vue 表来显示我从 JSON 中检索的信息。我收到的一个信息是一个名为“Status”的 int，我想根据此变量更改整行的颜色，例如，如果 Status 等于 1，则行为绿色。]

在bootstrap-vue的文档中，它显示了根据项目数组数据中每个元素内的 _rowVariant 对象更改颜色的行，但是如何在我的项目数组中没有此对象的情况下更改行的颜色？如果不可能，如何将此变量插入数组的每个对象中？

这是有关表格内容的代码：

<b-container fluid>
  <b-table hover :items="requests" :fields="fields"
  @row-clicked="onRowClicked"
  >

  <template slot="show_details" slot-scope="row">
  <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
  <b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
   {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
  </b-button>
  </template>
  <template slot="row-details" slot-scope="row">
    <b-card>
      <b-row class="mb-2">
        <b-col sm="3" class="text-sm-right"><b>Info 1:</b></b-col>
        <b-col>{{ row.item.horas_info }}</b-col>
      </b-row>
      <b-row class="mb-2">
        <b-col sm="3" class="text-sm-right"><b>Info 2:</b></b-col>
        <b-col>{{ row.item.pdf }}</b-col>
      </b-row>
      <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button> …

从bootstrap-vue documentation我可以看到如何启用每列排序，但是否可以对整个表进行排序？