标签: bootstrap-vue

我收到很多 Vue 警告，说 $listeners 是只读的，或者 $attrs 是只读的，并且与不同的 Bootstrap 项目或 .

例如：

[Vue warn]: $attrs is readonly.

found in

---> <BDropdown>
       <Display>
         <App>
           <Root>

我非常确定它与以某种方式加载 Vue 实例两次有关，但我真的不知道如何以其他方式执行此操作，以便路由仍然有效。

在我的main.js中，代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase';
import './components/firebaseInit';
import store from './store';
import { i18n } from './plugins/i18n.js'
import BootstrapVue from 'bootstrap-vue'
import VueCarousel from 'vue-carousel';

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);
Vue.use(VueCarousel);

let app;
firebase.auth().onAuthStateChanged(user => {
  if(!app) {
    app = new Vue({ …

我正在使用 vue-bootstrap。我尝试创建动态的网格组件来获取标题和数据。由于我们不知道有多少列传递给组件，因此我们应该检查传递的每个项目。

<template>
    <b-table striped hover :items="items"></b-table>
        <div v-for="title in items">
          <template slot="title.key" slot-scope="data">
            <input v-if="title.isActive" type="text" v-model="data.value">
            <textarea v-else type="text" v-model="data.value"></textarea>
          </template>
        </div>
   </b-table>
</template>

<script>
const items =[
      {'label': 'Description', 'key': 'description'},
      {'label': 'Name',  'key': 'name', 'isActive': true},
    ]

因此，如果 isActive 为 true，则此模板应该是 textarea（列应使用 textarea 而不是 input 进行更改）但是它不起作用，并且没有列更改 inputbox 和 textarea 并保持默认模板

您能帮忙解答一下这些问题吗？

谢谢

我使用 VueJS、Bootstrap Vue Table 和 Pagination 来显示分页的用户列表。数据似乎已正确加载，但分页的第 2 页未显示任何数据。

我有一个 Users 组件，它为 C 表引导组件传递必要的数据，如下所示：

用户.vue

<c-table
                :tableData="tableData"
                :fields="fields"
/>
<script>
import cTable from '../base/Table.vue'
import UserAPI from '../../api/user.js'
export default {
    created () {
        var vueComponent = this
        UserAPI.getUsers()
        .then(response => {
            if (response.data.success) {
                vueComponent.tableData = response.data.data
            } 
        })
    }
}
</script>

在表组件中，我尝试使用用户组件提供的数据来渲染分页表。

表.vue

<b-table
        :items="tableData.data"
        :fields="fields"
        :current-page="tableData.current_page"
        :per-page="tableData.per_page"
>
</b-table>

<nav>
   <b-pagination
     v-model="tableData.current_page"
     :total-rows="tableData.total"
     :per-page="tableData.per_page"
     prev-text="Prev"
     next-text="Next"
     hide-goto-end-buttons
    />
</nav>

<script>
export default {
    name : 'cTable',
    props: …

以下是 BootstrapVue 导航栏的使用方式https://bootstrap-vue.js.org/docs/components/navbar，但对于一个视图，我需要从导航栏向其传递一个 prop。

将其添加到原始 Vue 中非常容易，但 BootstrapVue 似乎没有解决方案。有人有任何线索吗？

这是一份工作副本，

<b-nav-item to="/login">register</b-nav-item>

我想把它改成这样：

<b-nav-item to="/login" :action="'register'">register</b-nav-item>

其中“action”是我需要传递的支柱。

我使用 Vue2 和 Boostrap-vue 来制作模态组件，这是代码

我通过了以下道具@backdrop="handleBackdrop"

<template>
<b-modal
    v-model="showModal"
    id="modal"
    @backdrop="handleBackdrop"
    @ok="handleBackdrop"
  >
...
</template>

<script>
data() {
    return {
      showModal: false
     }
},
  methods: {
    show() {
      this.showModal = true;
    },
    hide() {
      this.showModal = false;
    },
    handleBackdrop(ev) {
      ev.preventDefault();
      console.log("Click backdrop");
    }
}
</script>

我正在使用这个@ok来测试函数handleBackdrop并且它可以工作，但是我无法激活背景上的这个点击

我想在我的测试用例中测试模态行为。

1. 通过页面上的按钮打开模式（isVisible false=> true）
2. 通过模态上的按钮关闭模态（isVisible trye=> false）

第一步是可以的，但是第二步就失败了。我可以通过ref找到模态，但我找不到模态上的按钮。

首页.vue

<template>
  <div class="home">
    <b-button id='button-open' @click="open">open</b-button>
    <b-modal
      ref="modal-ref"
      hide-footer
    >
      <b-button id='button-close' @click="close">close</b-button>
    </b-modal>
  </div>
</template>


<script>
export default {
  methods: {
    open() {
      console.log('open');
      this.$refs['modal-ref'].show();
    },
    close() {
      console.log('ok');
      this.$refs['modal-ref'].hide();
    },
  },
};
</script>

home.spec.js

<template>
  <div class="home">
    <b-button id='button-open' @click="open">open</b-button>
    <b-modal
      ref="modal-ref"
      hide-footer
    >
      <b-button id='button-close' @click="close">close</b-button>
    </b-modal>
  </div>
</template>


<script>
export default {
  methods: {
    open() {
      console.log('open');
      this.$refs['modal-ref'].show();
    },
    close() {
      console.log('ok');
      this.$refs['modal-ref'].hide();
    },
  },
};
</script> …

我正在尝试使用bootstrap vue alert构建一个全局警报组件。我正在使用store 来保持警戒状态。vuex

<template>
  <b-alert show :variant="variant" dismissible> {{ message }} </b-alert>
</template>
<script>
export default {
  props: {
    variant: String,
    message: String
  },
  data() {
    return {};
  },
  name: "Alert",

  methods: {},
  computed: {}
};
</script>
<style scoped></style>

const alert = {
  namespaced: true,
  state: {
    variant: "",
    message: "",
    showAlert: false
  },
  getters: {
    variant: state => state.variant,
    message: state => state.message,
    showAlert: state => state.showAlert
  }, …