问题标签 [bootstrap-vue]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
388 浏览

vue.js - 在使用 render() 和 JSX 时使用 Bootstrap-Vue

我已经阅读了 Bootstrap Vue 的文档,并在几天前在他们的 github 问题跟踪器上提出了这个问题,但没有运气。

我找不到与使用 Vue 的 render() 或 JSX 生成引导 vue 元素有关的任何内容。

即使是最简单的场景,例如单击按钮打开模式,我也遇到了麻烦。

这些元素实际上是用 HTML 呈现的: 图片

但是按钮上的“点击”事件不起作用。

如果我在控制台中记录 Vue 实例,则 this.$refs 中也没有对模态实例的引用。

bootstrap-vue 是否支持 Vue 的 render() 和 JSX 功能?如果是这样,这种事情是如何实现的?

0 投票
3 回答
3386 浏览

vue.js - 通过 vuex 状态管理打开哪个 bootstrap-vue 模态

我正在构建一个需要对多个 bootstrap-vue 模态进行排序的应用程序。具体来说,嵌套组件中的按钮应打开“管理”模式。“管理”模式包含按钮,单击时应关闭“管理”模式并打开另一个模式(例如“编辑”、“添加”、“完成”等)。

我不想向上和向下传递道具/发射事件以便可以从不同的嵌套组件触发这些事件,我希望在我的商店中有一个值this.$store.state.general.activeModal,它决定显示哪个模式(如果有)

问题:如何在我的主应用程序页面中创建一组模式,以在状态值发生更改时呈现?

我的主应用程序将如下所示:

例如,modal1 应该在this.$store.state.general.activeModal设置为“modal1”时显示,并在值更改为其他值时关闭。

我尝试创建一个计算变量“showModal1”,它在何时为真store.etc.activeModal=='modal1',否则为假,然后v-modal="showModal1"用于显示/隐藏模态,但每次商店中的值匹配时,它最终都会创建模态的两个副本(显然计算值触发当存储中的值更改时两次?)

任何帮助都会很棒!

0 投票
1 回答
1257 浏览

vue.js - 我们可以将 bootstrap-vue 中所有组件的全局导入与所选组件的导入混合吗?

我想在 bootstrap-vue 中显着减少标签噪音并将长标签名称减少为短名称。这是我在 main.js 中的 vue-cli 生成项目中所做的:

在 MyComponent.Vue 现在我有:

代替:

这在技术上正确吗?在非常大的表单中,它会产生巨大的差异,使表单看起来更干净,并专注于表单的关键内容。

0 投票
1 回答
8678 浏览

vuejs2 - Bootstrap-vue 选项卡样式

使用 bootstrap-vue 时,我无法在我的单个文件组件中覆盖引导样式

我的文件如下所示:

我可以检查我的组件,我可以看到“mytab”类被添加到带有 nav-item 类名的 li 父 div 中,但 css 没有出现。

它在这里工作:https ://jsfiddle.net/3xwmm1qt/43/但我很确定这是因为页面呈现后正在加载css。我不是 100% 的。

更新我还尝试从样式标签中删除“范围”属性,并且 css 仍然可以工作。当我检查 div 时,它甚至都没有出现。我仍然可以看到类名,但在“规则”选项卡(使用 FF)中,我的自定义类名没有样式。

0 投票
2 回答
6970 浏览

vue.js - Can't select item in b-dropdown vuejs

Hy I'm creating a simple dropdown using bootstrap-vue in vuejs. The Code in my component is like this :

The problem is I can't select any item from dropdown item. Is there something that I missed here ? Thanks in advance

Reference : https://bootstrap-vue.js.org/docs/components/dropdown

0 投票
1 回答
194 浏览

html - 右侧的侧面菜单选项

我正在尝试使用 bootstrap4 Vue 在右侧打开侧边栏选项,但它在这里不起作用在此处输入图像描述 是我的 HTML

我想要 Addproduct 和 listProduct 在右侧而不是向下我试图使用下拉右但它停止工作任何想法我做错了什么。

0 投票
1 回答
7394 浏览

laravel - 如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?

我正在尝试将Bootstrap Vue加载到 Laravel 5.6 项目中

官方文档说要修改您的webpack.config.js文件,例如:

Webpack 文档:https ://webpack.js.org/guides/asset-management/#loading-css

我没有 webpack.config.js 文件,所以我尝试使用 Laravel mix 加载 CSS

这给了我一个错误

mix.combine() 需要完整的输出文件路径作为第二个参数。

而且我不相信这是正确的方法。

将 bootstrap-vue 添加到新的 Laravel 5.6 项目中的正确方法是什么?

0 投票
4 回答
17749 浏览

vuejs2 - 如何隐藏 bootstrap-vue 表标题行

bootstrap-vue默认情况下会为我的数据创建一个标题行。有什么方法可以隐藏 a 的标题行,<b-table>以便只呈现数据项?

0 投票
4 回答
19938 浏览

css - bootstrap-vue 改变位置

默认<b-modal>显示在页面顶部。将属性centered添加到标签时。它居中。

但是,我想在页面顶部下方显示具有一定间隙的模态。
打开主页时会显示模态框。

AppModal.vue

AppHome.vue

modal相关的html源码

如您所见,mymodal类已正确应用。但是 div.modal-dialog没有我给它的 css 属性。

在开发工具中找到的真正的 CSS 属性

我尝试添加一个自定义类<b-modal>并为其设置样式。没有任何效果。请帮忙。

0 投票
2 回答
1740 浏览

javascript - 如何为 bootstrap-vue 模态编写测试用例?

我想测试引导 vue 模态显示。在项目页面中,模态在单击按钮时通过toggleModal方法显示/隐藏。因此模态display样式更改为none or ''反之亦然。在业力测试中,我想用调用的方法测试该显示,但它只更改了数据并且样式属性没有改变,所以我在测试用例中失败了......

vm.$nextTick(() => {
     期望(modal.style.display).toBe('')
})

如何正确实现 bootstrap-vue 模态显示测试用例!?

索引.vue

index.spec.js