从 Vue 方法切换侧边栏？

Question

在 a 中<b-table>，我想对每个项目创建一个操作，所以我有一个按钮：<b-table :items="data" :fields="fields">  <template v-slot:cell(actions)="data">    <b-button v-on:click="doIt(data.index)">Do It</b-button>  </template></b-table>然后我在侧边栏中有一个表格<b-sidebar id="do-it-form" title="Do it" right>...</b-sidebar>在我的方法中，我想响应这个动作：methods: {    doIt(id) {        sidebar.form.id = id        sidebar.show().onSubmit(() => {           axio...           refresh(<b-table>)        })    }}当然，这最后一部分是无效的。在 Bootstrap Vue手册中，我没有找到如何从 Vue 与 Bootstrap 组件进行交互。有什么线索吗？

Answer 1

您可以在 上发出一个事件$root，该事件可用于切换侧边栏。第二个参数是id你想打开的侧边栏。 this.$root.$emit('bv::toggle::collapse', 'my-sidebar-id')

<b-collapse>并<b-sidebar>监听相同的事件，这就是它collapse在事件中说的原因。

new Vue({

  el: '#app',

  methods: {

    openSidebar() {

      this.$root.$emit('bv::toggle::collapse', 'my-sidebar')

    }

  }

})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<script src="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.js"></script>

<div id="app">

  <b-sidebar id="my-sidebar" right>

    My sidebar

  </b-sidebar>

  <b-btn @click="openSidebar">

    Open sidebar

  </b-btn>

</div>

或者，您可以将布尔属性绑定到v-model侧边栏上，并将布尔值设置为true您想要打开侧边栏的时间。

new Vue({

  el: '#app',

  data() {

    return {

      isSidebarOpen: false

    }

  },

  methods: {

    openSidebar() {

      this.isSidebarOpen = true

    }

  }

})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<script src="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.js"></script>

<div id="app">

  <b-sidebar v-model="isSidebarOpen" right>

    My sidebar

  </b-sidebar>

  <b-btn @click="openSidebar">

    Open sidebar

  </b-btn>

</div>

Answer 2

此外，您还可以使用侧边栏内置的公共方法之一show，hide或toggle。您所需要的只是添加对侧边栏的引用

<b-sidebar ref="mySidebar" id="do-it-form">

...

</b-sidebar>

然后在您需要的任何方法中/何时需要，您可以简单地调用它们中的任何一个

this.$refs.mysidebar.show();

this.$refs.mysidebar.hide();

this.$refs.mysidebar.toggle();

Answer 3

visible您也可以只为组件上的 prop分配一个布尔值b-sidebar，并根据需要切换布尔值。

<b-sidebar ref="mySidebar" id="do-it-form" :visible="showSidebar">

...

</b-sidebar>

并切换它：

data: {

   showSidebar: false, //starts off invisible

},

methods: {

   toggleSidebar(){

      this.showSidebar = !this.showSidebar

   }

}

乍一看，这种方法并不是最好的方法，因为你有其他组件来更新侧边栏的可见性。此用例适用于侧边栏可见性的所有更新都是通过使用中央布尔值从中央存储进行的情况。

例如

const state = {

  showSidebar: null

}

const mutations: {

  toggleSidebar(state, payload){

     if (payload) { //payload incase you want to force a value and not just toggle

            state.showSidebar = payload;

     } else {

            state.showSidebar = !state.showSidebar;

     }

  }

}

在您的组件中：

computed: {

   showSidebar(){

     return this.$store.state.showSidebar

   }, //starts off invisible

},

methods: {

   toggleSidebar(){

      this.$store.commit("toggleSidebar");

   }

}

您更新的侧边栏组件将如下所示：

<b-sidebar ref="mySidebar" id="do-it-form" :visible="showSidebar" @change="updateSidebar">

...

</b-sidebar>

和方法：

methods: {

   updateSidebar(value){

      this.$store.commit("toggleSidebar", value);

   }

}