标签: bootstrap-vue
无法在b-dropdown vuejs中选择项目
Hy 我正在使用 vuejs 中的 bootstrap-vue 创建一个简单的下拉列表。我的组件中的代码是这样的：
<b-col sm="2">
<b-dropdown :text="selectedItem" v-model="selectedItem">
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here</b-dropdown-item>
</b-dropdown>
{{selectedItem}}
</b-col>
...
...
...
data () {
return {
selectedItem: ''
}
}
问题是我无法从下拉项目中选择任何项目。有什么我在这里错过的吗？提前致谢
推荐指数
解决办法
查看次数
bootstrap-vue 模式不显示
环境
dotnet core 2.1.0
"bootstrap-vue": "^2.0.0-rc.11",
"nuxt": "^1.4.1",
"vue": "^2.5.16",
"vue-axios": "^2.1.1",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.5.16",
"vue-toasted": "^1.1.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^4.0.1"
我不知道如何让一个简单的 bootstrap-vue 模态工作。该modal-sample组件呈现，与按钮可见，但单击按钮时没有任何反应（模式不“秀”）。
但是，在 vue 开发工具中，我可以看到show事件已发出。另外，如果我将代码复制并粘贴到 bootstrap-vue 操场中，它会起作用，所以它必须是我的设置。不确定它是否重要，但它也在 dotnet 核心环境中运行。
配置文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
...
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue',
...
}
...
,
module: {
rules: [
{ test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
{ test: /\.js$/,
include: [/ClientApp/,
require.resolve("bootstrap-vue")],
use: 'babel-loader' },
{ test: …推荐指数
解决办法
查看次数
使用按钮触发表单文件 bootstrap vue
嗨，我有一个关于触发组件 b-form-file 的问题。
<b-form-file ref="imageProfile"></b-form-file>
我尝试使用 this.$refs.imageProfile.click() 不起作用。而且我在该元素上没有找到单击功能。
谢谢你。
推荐指数
解决办法
查看次数
在 bootstrap-vuejs 中将背景颜色更改为导航栏
根据文档，导航栏的样式可以设置如下：
<b-navbar toggleable="lg" type="dark" variant="info">
<!-- Or -->
<b-navbar toggleable="lg" type="dark" variant="dark">
不管怎样，只要改变type和variant道具。然而，我想设置一个自定义背景颜色，如#AABB55. 我找不到一种简单的方法来做到这一点。
此外，当您看到文档和源代码时，您没有太多选择。
有没有办法在不需要触摸<b-navbar>代码的情况下更改此属性？
推荐指数
解决办法
查看次数
如何更新在 bootstrap-vue 中点击的按钮
我正在使用Bootstrap-Vue来显示表格，并且我使用 vue-slot 添加了一个带有更新按钮的额外列。我有这个显示很好，当你点击按钮时我有一个方法被调用。在该方法中，我可以访问该项目的所有信息，但是我似乎无法找到访问该按钮的方法。我想禁用它并更改它的内容。如何访问按钮元素？我在这里创建了一个codepen 示例，它显示了我已经设置和需要做的事情。
HTML
<div id='app'>
<div>{{ this.output }}</div>
<b-table hover head-variant="dark"
id="pages-table"
:items="items"
:fields="fields">
<template slot="actions" slot-scope="data">
<button class="btn btn-dark" @click="update(data)">Update</button>
</template>
</b-table>
</div>
JavaScript
new Vue({
el: "#app",
data: {
output: null,
items: [
{
id: 1,
name: "Tony"
},
{
id: 2,
name: "John"
},
{
id: 3,
name: "Paul"
}
],
fields: [
{
key: "id",
label: "ID",
sortable: true
},
{ key: "name" },
{ key: "actions" } …推荐指数
解决办法
查看次数
Nuxt.js + BootstrapVue：如何将表单卡放置在页面中央？
我有一张带有表格的卡片/我想将其放在页面的中央。
这是我的布局“空”：
<template>
<nuxt />
</template>
<script>
export default {
name: 'Empty'
}
</script>
<style></style>
我有下一页的表格：
<template>
<b-card>
<b-form @submit.stop.prevent="onSubmit">
...
</b-form>
</b-card>
</template>
我得到下一个结果：
<body data-gr-c-s-loaded="true">
<div id="__nuxt">
<!---->
<!---->
<div id="__layout">
<div class="card">
<!---->
<!---->
<div class="card-body">
<!---->
<!---->
<form class="">
...
</form>
</div>
<!---->
<!---->
</div>
</div>
</div>
...
</body>
在屏幕上，它看起来像：
但我想要它看起来像：
我找不到怎么做。你能帮助我吗？
推荐指数
解决办法
查看次数
如何将 BootstrapVue 与 Nuxt.js 中的 Purgecss 配合使用所需的所有内容列入白名单
我创建了一个 Nuxt.js 项目，它使用 BootstrapVue 作为 UI。为了减少捆绑包的大小，我仅导入每个组件所需的 BV 组件。然而，我仍然得到了一个过大的捆绑包，因为 bootstrap.css 和 bootstrap-vue.css 被完整地捆绑在一起。bootstrap.css 的大小是主要问题。
为了解决这个问题，我安装了 nuxt-purgecss，希望它能从 bootstrap.css 和 bootstrap-vue.css 中提取所有未使用的 css，并为该包创建仅包含我所使用的 BootsrapVue 类的 css 的版本。我实际上正在使用。
起初，这两个文件都没有被捆绑，经过一番搜索，我发现解决方案似乎是将我正在使用的 BootstrapVue 选择器列入白名单。（尽管如果有人能向我展示一种我不需要这样做并且 purgecss 可以自行评估它的方法，我会很高兴！）
nuxt.config.js 的相关部分现在如下：
modules: [
'nuxt-purgecss'
],
purgeCSS: {
mode: 'postcss',
paths: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'node_modules/bootstrap-vue/es/**/**/*.js',
'node_modules/bootstrap-vue/**/*.js'
],
styleExtensions: ['.css'],
whitelist: [
'html',
'body',
'navbar',
'nuxt-progress',
'b-navbar',
'b-navbar-toggle',
'b-navbar-brand',
'b-navbar-nav',
'b-nav-item',
'b-alert',
'b-collapse',
'b-nav-item-dropdown',
'b-dropdown-item',
'b-container',
'b-row',
'b-col',
'b-card',
'b-form',
'b-form-group',
'b-form-input',
'b-button',
'b-modal'
],
whitelistPatterns: [/^b-/, /nav/]
},
build: …推荐指数
解决办法
查看次数
在移动视图中逐一显示 Bootstrap Vue 列
我在我的列中使用 Bootstrap Vue 库，每行显示 3 张卡片，它在桌面上看起来很好，但在移动设备上看起来太小，所以我想在移动设备上将这 3 张卡片一张一张地显示在另一张卡片的下面。我怎样才能做到这一点？
new Vue({
el: "#app"
});.card{
background-color: #BAE5FF !important;
border: none !important;
border-radius: 0px 0px !important;
}
.work-link{
color: #172e54;
}<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-row>
<b-col cols="4" sm="4" md="4">
<b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
<template v-slot:header>
<a href="" class="work-link text-center"><h5 class="mb-0"><strong>1</strong></h5></a>
</template>
</b-card>
</b-col>
<b-col cols="4" sm="4" md="4">
<b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
<template v-slot:header>
<a href="" class="work-link text-center"><h5 …推荐指数
解决办法
查看次数
如何在 vue js v-for 中单独折叠动态手风琴？
我需要单独折叠在 vue js v-for 中创建的手风琴。我知道像 Id 这样可用于单独识别手风琴的东西可以解决这个问题。但不知道在哪里给出这个动态ID？
这是我的 HTML
<div role="tablist">
<div v-for="item in productFormData" v-bind:key="item.id">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.accordion-productdetails variant="info">Product Details</b-button>
</b-card-header>
<b-collapse
id="accordion-productdetails"
visible
accordion="productdetails-accordion"
role="tabpanel"
>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<span style="font-size:13px;font-weight:bold;">Name</span>
<div>
<span id="spnCustomerName">{{item.name}}</span>
</div>
</div>
</div>
</b-collapse>
</b-card>
</div>
推荐指数
解决办法
查看次数
如何在父组件中发送模态结果
我正在使用 vuejs 和 bootstrap-vue。我有两个组件。对象列表和我的模式。当我单击特定按钮时，我会打开模式。通常，我的模式会询问：“您确定要删除这些记录吗？” 例如。
一切正常，但我不知道如何在父组件中检索模式的结果（如果我单击“确定”或“取消”，...）。
我该怎么办呢？
由于我的模式是这样打开的：
在我的父组件（列表）中：
deleteSelectedGroups () {
const modalOptions = {
action: 'delete',
records: this.selectedGroups,
recordFields: ['name', 'usersCount'],
okTitle: 'Delete',
okVariant: 'danger'
}
this.showModalConfirmation(modalOptions)
// ...
// if result of modal is true then ...
},
showModalConfirmation (modalOptions) {
this.$refs.ModalConfirmation.show(modalOptions)
}
在我的模态组件中：
show (modalOptions) {
for (let option in modalOptions) {
this[option] = modalOptions[option]
}
this.$bvModal.show('modalConfirmation')
}
我应该简单地通过用我的方法返回值来做到这一点吗？
或者我应该采用 vuejs 方式并向父级发出一个变量？
编辑：我希望我的流程如何（伪代码）：
deleteselectedGroups () {
openModal()
modalAnswer = modal.getAnswer()
if (modalAnswer === 'OK') {
deleteMyRecords() …推荐指数
解决办法
查看次数
标签 统计
bootstrap-vue ×10
vue.js ×9
bootstrap-4 ×2
nuxt.js ×2
.net-core ×1
css ×1
html ×1
javascript ×1
vuejs2 ×1