问题标签 [bootstrap-vue]

我如何从这里使用主题： https ://bootswatch.com/

从这里使用 bootstrap-vue：https ://bootstrap-vue.js.org/docs

在 Nuxt.js 中： https ://nuxtjs.org/guide/modules#write-a-basic-module

我不是这些方面的专家 - 最好的方法是什么？

我最近一直在使用 vuejs 和bootstrap-vue。决定在我的项目中添加单元测试。

我对单元测试不是很熟悉，所以我正在尝试任何我能找到的东西来了解它是如何工作的。

登录.specs.js

登录.vue

测试似乎一切正常。但是我得到了这些警告，并且可以找到一种方法来实际修复它。

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

所以我环顾四周，似乎我需要将这些子组件添加到父亲中。

这是这些组件的文档。

我还添加了我的配置文件（与 vue-cli 3 生成的相同）

jest.congif.js

我在数据中有一个 bootstrap-vue 表（b-table），我想让它的 'Id' 值可供稍后的事件访问，但我想从表渲染中隐藏它。

我想我看到了一种通过将“Id”绑定到 row.key 或 row.index 或一些此类 b 表属性来做到这一点的方法，但我在任何地方都找不到。

所以我在字段定义中包含了列值，但是我找不到隐藏列的方法。

该表如下所示：

字段定义如下：

但这意味着渲染了 Id 列。

有没有办法通过使“Id”列不可见或将 data.Id 值分配给其他一些 b 表行数据上下文来做我想做的事情？

与少数开发人员一起启动一个大型应用程序。使用 webpack 和 bootstrap-vue。我将如何默认 <b-card> （和其他组件）的样式。换句话说，我可以默认：

相当于：

确保我们在整个应用程序中保持外观一致。

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

找了好几个 地方，都没有找到有效的解决方案。

这是我必须使用的：

shrinkNav点击时运行两次，但滚动时没有。Vue/Nuxt 的方法是什么？

在父组件中，我有以下内容：

“collapse0”和“collapse1”当前是我在子组件中动态生成的折叠的硬编码 id，如下所示：

每个都有自己的折叠/展开按钮，如下所示：

我没有看到任何记录的方式来动态完成展开/折叠多个。我一直在摆弄 vb-toggle="[collapse0, collapse1]" 和其他变体，但还没有偶然发现实现这一目标的方法。

我还尝试让父按钮只更新一个数据变量，我将其作为道具发送给子组件。这种方法似乎让我更进一步，除了在这种情况下，据我了解，我必须执行 v-model="{some data variable here}" 来更改折叠状态。所以我可以得到道具，最初将变量设置为它，并且最初可以工作，但在没有观察者的情况下不会对道具的更改做出反应，这对我来说似乎不必要地复杂。我也不确定这种方法将如何与单个折叠上的切换按钮进行交互，也不知道它应该如何与父按钮进行通信。

我已经查看了这个解决方案，但我无法弄清楚如何实现它，特别是因为我没有在父母的“组件”对象中声明子组件。

所以，这里的问题之一是——有没有办法动态地将多个折叠 ID 传递给 vb-toggle 元素？

如果没有，有没有办法在没有填充组件对象的情况下实现 refs 解决方案？

而且，如果这三个都失败了，是否有人举例说明他们使用父变量/子道具/子变量类型的场景成功地做到了这一点？

提前致谢！

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

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

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

currentPage 现在设置为 1，如下所示：

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

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

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

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

例子：

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

如果您单击第 2 页，然后单击第 1 页，它将显示商店的页码在第 2 页。

因此，它几乎落后了一步。如果有人可以将我推向正确的方向，那将大有帮助。谢谢！

试图达到与https://bootstrap-vue.js.org/docs/components/table#row-details-support相同的结果

我的代码：

结果是：

如您所见，显示详细信息被隔离到单个列而不是整行。

我想要实现的是让这个显示详细信息部分成为完整的行宽，如果我可以单击按钮转到一个方法来调用要在此处显示的其他数据，而不是本机 bootstrap-vue 功能。

我在 Laravel 5 项目中使用 Vue 2.5.16 和 bootstrap-vue 2.0.0 rc.11。作为一个 vue 文件的一部分，我正在打开这样的模式：

模式已定义，当我使用“npm run dev”或“npm run watch”编译文件时，它可以工作。当我使用“npm run prod”编译项目时，模式没有打开，没有任何错误消息。

为了调试这个我试图运行

在控制台以及部分代码上。两次我都得到

我试过谷歌以获取更多信息。所有解决方案都适用于未完全加载的应用程序 - 据我所知，这不适用于我的案例。有什么想法可以看吗？

介绍：

我想测试一下，如果我点击提交按钮，就会调用 onSubmit 函数。根据我阅读文档时的理解，我认为这是可能的：

1. https://sinonjs.org/releases/v6.1.5/spies/
2. https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-events

预期输出：

• 让测试运行并告诉我通过或失败

实际输出：

• 没有，我目前陷入以下困境：

语境：

在我的测试中：

import NavBar from '@/components/layout/NavBar.vue'

在该组件中，我有一个（此处为简化版本）表单：

<b-nav-form @submit="onSubmit"> <b-form-input /> <b-button type="submit">Search</b-button> </b-nav-form>

我想测试一下，如果我点击提交按钮，就会调用 onSubmit 函数。

我的设置是 Vue、BootstrapVue 和 Sinon。我知道我必须设置一个监听被调用函数的间谍。

如果有帮助，这是我组件中的实际脚本：

我理解的例子：

但这与例如单击表单中的按钮无关。

请指教