如何在窗口调整大小时隐藏 vue-bootstrap 上的折叠？答案

【问题标题】：How hide collapse on vue-bootstrap on window resize?如何在窗口调整大小时隐藏 vue-bootstrap 上的折叠？
【发布时间】：2021-07-29 08:47:57
【问题描述】：

我想在调整窗口大小时关闭collapse。

var app = new Vue({
  el: '#app',
  created() {
    window.addEventListener('resize', this.hideCollapse)
  },
  destroyed() {
    window.removeEventListener('resize', this.hideCollapse)
  },
  methods: {
    hideCollapse() {
    console.log('hide collapse')
       // what should I call to make the collapse hide
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

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


<div id="app">
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>Hello!</b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

添加一个名为open 的数据属性并将其绑定到b-collapse 组件的v-model 指令，然后在resize 事件回调中更新：

var app = new Vue({
  el: '#app',
  data() {
    return {
      open: false
    }
  },
  created() {
    window.addEventListener('resize', this.hideCollapse)
  },
  destroyed() {
    window.removeEventListener('resize', this.hideCollapse)
  },
  methods: {
    hideCollapse() {
      console.log('hise collapse')
      this.open=true
      
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

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


<!-- App -->
<div id="app">
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse v-model="open" id="collapse-1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>Hello!</b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

【讨论】：

但是您的答案打开了折叠而不是关闭，它只会发生一次，因为对于下一个窗口调整 open 的值不会改变，所以不会发生任何变化。我更喜欢 emit 到 bootstrap-vue 事件或 ...
你可以做this.open=!this.open
不好推荐，因为起初open 应该是真的，这使得折叠打开，但一开始我需要关闭它。