标签: bootstrap-vue

我用Vuejs来开发我的前端,现在我必须设计它.我遇到了 Bootstrap-vue.使用Bootstrap 4或Bootstrap-vue会更好.它们是相同的还是使用Bootstap-vue是有利的.

我知道这个问题已经被问到了.但我不知道如何在vuejs中使用代码.我尝试了很多,但没有任何结果.我还添加了我的代码.有人可以帮帮我吗？这是我的代码.谢谢

HTML

<template>
<div class="fileUpload">
    <b-container fluid>

        <h4>Image Overview</h4>
        <b-button @click="$refs.fileInput.click()" class="btn-right">Select an image</b-button>

        <b-table @row-clicked="viewImage" striped hover :items="images" :fields="image_fields"></b-table>

        <input style="display: none" ref="fileInput" type="file" @change="fileSelected" enctype="multipart/form-data">
        <b-button variant="success" class="btn-right" @click="uploadImage" method="post">Upload image</b-button>


    </b-container>
</div>

JS

<script>
export default {
    name: 'listImage',
    data() {
        return {
            selectedFile: null,
            images: [],
            image_fields: ['id', 'name'],
            total_images: 1               
        }
    },
    methods: {
        fileSelected(evt) {
            evt.preventDefault()
            console.log(evt);
            this.selectedFile = evt.target.files[0]
        },
        uploadImage() {
            var data = new FormData();
            data.append('image', this.selectedFile, this.selectedFile.data)
            var token = …

我正在使用 Bootstrap-Vue v2.0.0-rc.11，但我无法理解如何更新表格内容。我相信这是微不足道的。

我正在使用项目提供程序功能从后端提取我的内容。

        <b-table
                 :items="myProvider"
        >

初始调用使用以下方法可以正常工作。

export default {
    methods: {
        myProvider(ctx) {
            let promise = axios.get('/backend?currentPage=' + ctx.currentPage);

            return promise.then((response) => {
                return(response.items || []);
            });
        },

要复制一个行项目，我打开一个模式来输入一个新名称。我为重复工作做了一个后端调用，效果很好。现在我想刷新显示新项目的表格中显示的内容。我该怎么做呢？

我能想到的最简单的方法是再次调用项目提供程序函数（此处：'myProvider'）。我可以从模态中做到这一点，但我无法提供正确的参数（此处：'ctx'）。

是否有触发/发出事件以重新发出后端调用？

我试过这样的事情：

this.$refs.nameOfTable.$forceUpdate()

this.$refs.nameOfTable.$emit('XXX') // XXX = placeholder for various events

任何提示表示赞赏！谢谢你。

我正在使用 Bootstrap-vue，并且有一个简单的折叠组件，以便我可以切换内容的可见性。我正在寻找一种方法，在切换按钮中包含一个箭头图标来指示折叠状态：如果内容打开则箭头指向下方，如果内容关闭则箭头指向侧面。

我已经看过这里的解决方案Bootstrap 4 Collapse show state with Font Awesome icon。然而，虽然这适用于 Bootstrap 4，但我不能让它与 Bootstrap-vue 一起使用，因为标记元素是不同的。那么，鉴于我在下面的标记，我怎样才能实现折叠状态箭头？

<div>
  <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
  <b-collapse visible id="collapse3">
     <b-card> some content </b-card>
  </b-collapse>
</div>

bootstrap-vue默认情况下会为我的数据创建标题行.是否有任何方法可以隐藏标题行,<b-table>因此只会呈现数据项？

我正在用Bootstrap 4编写一个Vue.js应用程序,虽然我按照文档说明但无法加载.

添加到main.js

Vue.use(BootstrapVue);

添加到与App.vue相关的css文件中:

@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

这是模板:

<div class="main">
<div>

    <b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
        <p class="my-4">{{msg}}</p>
        <p class="my-4">{{statusCode}}</p>

    </b-modal>
</div>

<div>
    <b-tab title="Players" active>
        <br>Players data
    </b-tab>
    <b-tab title="Tournaments" active>
        <br>Tournament data
    </b-tab>
</div>

结果:没有css呈现但是在dist目录的css文件中我看到Bootstrap我错过了什么？该项目由vue-cli 3.0-beta创建

我的页面中有两个模态，我需要一种方法来在第一个模态上按下“确定”按钮时收听“确定”事件，并通过打开另一个模态来响应。文档中没有示例：https : //bootstrap-vue.js.org/docs/components/modal/

我想使用这个监听器，但没有解释，我无法找到这里是什么。

export default {
  mounted() {
    this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

这是我的代码的相关部分：

<div>
    <b-modal id="modal-center-add-post" style="width: 120px" centered  class="h-50 d-inline-block min-vw-100" ok-title="next" >
        <add-post></add-post>
    </b-modal>
</div>
<div>
    <b-modal id="modal-center-add-content" style="width: 120px" 
        centered  class="h-50 d-inline-block min-vw-100" 
        ok-only ok-title="Create" >
        <add-content></add-content>
    </b-modal>
</div>

和添加后组件代码是

<template>
    <form>
        <div class="form-group row">
            <label for="title" 
                   class="col-sm-2 col-form-label">
                   Title
            </label>
            <div class="col-sm-10">
                <input type="text" 
                       class="form-control" 
                       id="title" 
                       placeholder="Title">
            </div>
        </div>
        <div class="form-group row"> …

我想使用bootstrap vue模式组件在vuejs app中实现此功能:

当用户单击页面UI上的"删除"按钮时:

• 它显示了其正文中包含动态内容的模式:"您确定要删除客户:customer_name_here"

• 如果用户点击"取消"按钮:模态消失.

• 如果用户点击"确定"按钮:

• 它将模态正文内容更改为:'删除客户'customer_name_here'...,它会禁用"取消"和"确定"按钮,并调用API来删除客户.

从API收到成功响应时:

• 它将模态正文内容更改为:'已成功删除客户'customer_name_here'
• 仅显示模态页脚中的"确定"按钮,如果单击模式将消失.

这个代码到目前为止:

 <b-button   v-b-modal.modal1  variant="danger">Delete</b-button>

    <b-modal id="modal1" title="Delete Customer" 
@ok="deleteCustomer" centered no-close-on-backdrop -close-on-esc ref="modal">
        <p class="my-4">Are you sure, you want to delete customer:</p>
        <p>{{customer.name}}</p>
      </b-modal>

Vue JS代码:

deleteCustomer(evt) {

      evt.preventDefault()
      this.$refs.modal.hide()

      CustomerApi.deleteCustomer(this.customer.id).then(response => {
          // successful response
        })

我正在使用Bootstrap-vue tabs。这是标签的 HTML：

<b-tabs>
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

这是猫的路线：

{
        path: '/animals/:id#cats',
        name: 'getCats',
        component: Animals // removed from HTML to simplify
    },

在组件代码中：

this.$router.replace({ name: 'getCats', params: { id: this.$route.params.id }})

这将需要：

本地主机：3000/animals/234909888#cats

但是狗选项卡是打开的（第一个选项卡）而不是猫选项卡。刷新浏览器也会显示空白页面。

如何解决这个问题？

我正在将 NUXTJS 应用程序用于 SSR 页面，但出现 bootstrap-vue 图标大小问题的错误。

该文件托管在 AWS 服务器中，这将是错误

The code generator has deoptimised the styling of 
/var/www/html/my_folder/node_modules/bootstrap-vue/src/icons/icons.js
as it exceeds the max of 500KB.

这将是什么问题？我也在构建位置添加了 babbel ..