Vuejs: открыть сворачиваемое меню, когда определенная вкладка активна, и закрыть его, когда она неактивна.

Question

У меня есть два метода forceOpenSettings () и forceCloseSettings (). Они мне нужны для открытия и закрытия складной секции. методы работают нормально, я тестировал их отдельно. Но мне нужно сделать это по условию, у меня b-tab с 4 вкладками. Из них, когда я нажимаю на вкладку, коллапс должен открываться, и всякий раз, когда вкладка становится неактивной, коллапс должен закрываться.

<b-tabs content-class="mt-3">
  <b-tab title="First" active><p>I'm the first tab</p></b-tab>
  <b-tab title="Second"><p>I'm the second tab</p></b-tab>
</b-tabs>

* 1003 @hide, и все работает нормально,

<b-collapse role="tabpanel" @show="forceOpenSettings" @hide="forceCloseSettings">......</b-collapse>

Answer 1

Vue управляется данными, для этого вам не нужны функции:

{
  ...,
  data(){
    return {
      ...,
      active: 'first',
      tabs: ["first", "second", "third"]
    }
  }
}

<b-tabs content-class="mt-3">
  <b-tab
    v-for="tab in tabs"
    :key="tab"
    :title="tab" 
    :active="active==tab" 
    @click="active=tab" 
    :style="`display:${active==tab? 'block':'none}`'"
  >
    <p>I'm the {{tab}} tab</p>
  </b-tab>

</b-tabs>

Хорошо, расширяем это для взаимодействия с компонентом b-collapse

{
  props: ["tab", "active"],
  computed(){
    collapse: {
      get: function(){
        return this.active == this.tab
      },
      set: function(value){
        this.$emit('update:active', this.tab)
      }
    }
  }
}

<!-- wrap in component for prop management -> no collapse[tab] needed than -->
<template>
<b-collapse 
  role="tabpanel" 
  v-model="collapse"
 ><slot></slot></b-collapse>
 </template>

 <!-- then in scope of tabs -->
 <wrapped-collapse 
    v-for="tab in tabs"
    :key="tab"
    :active.sync="active" :tab="tab"  
  >...</wrapped-collapse>

Answer 2

Vanilla JS: Вот итератор Dynami c, который проверяет, установлен ли активный атрибут как атрибут ...

function opendiv() {
  document.getElementById('myDiv').style.display = "block";
}

function closediv() {
  document.getElementById('myDiv').style.display = "none";
}

let tabs = document.getElementsByTagName('b-tab');
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', event => {
    if (tabs[i].getAttribute("active") !== null) {
      opendiv();
    } else {
      closediv();
    }
  });
}

<b-tabs content-class="mt-3">
  <b-tab title="First">
    <p>I'm the first tab</p>
  </b-tab>
  <b-tab title="Second" active>
    <p>I'm the second tab</p>
  </b-tab>
</b-tabs>

<div id="myDiv" style="display:none;">Show this div when second tab has an attribute named 'active'</div>

Получить элементы по имени их тега ... Затем напишите свой условный оператор для поиска второй итерации элементов с помощью ключа 1, который - вторая вкладка, проверьте, не является ли атрибут нулевым, что означает, что он установлен, но не имеет значения. Если его нет в теге, он вернет null.

  let tabs = document.getElementsByTagName('b-tab');

  if(tabs[1].getAttribute("active") !== null){
    // run opendiv();
  }else{
    // run closediv();
  }

Answer 3

Для этого вам не нужно несколько функций.

У вас может быть одна функция, которая удаляет атрибут active со всех вкладок, а затем просто делает тот, который вы щелкнули, active. Просто дайте всем компонентам <b-tab> класс tab, а затем вы можете использовать эту одну функцию для всех вкладок с классом tab. Затем вы можете запустить метод с помощью директивы @click="doTabs()".

Я обновил ответ, чтобы применить его к экземпляру Vue.

Запустите фрагмент, чтобы увидеть его в действии.

new Vue({
  el: '#app',
  methods: {
    doTabs() {
      const tabs = document.querySelectorAll('.tab')
      tabs.forEach(i => i.removeAttribute('active'))
      event.currentTarget.setAttribute('active', true)
    }
  }
})

.tab {padding: 10px; border: 1px solid #ccc; cursor: pointer; display: flex; display: block}
[active] {background-color: #eee}
.content {padding-left: 20px; font-size: 12px; visibility: hidden; opacity: 0; transition: all 0.2s ease; margin-top: -40px}
[active] .content {visibility: visible; opacity: 1;margin-top: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div title="First" class="tab" @click="doTabs()" active>
    <p>I'm the first tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
  <div title="Second" class="tab" @click="doTabs()">
    <p>I'm the second tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
</div>

Answer 4

Вы можете использовать событие 'click', которое генерируется при нажатии на вкладку или активируется при навигации с помощью клавиатуры.

<b-tabs content-class="mt-3">
  <b-tab title="First" active @click="closediv()"><p>I'm the first tab</p></b-tab>
  <b-tab title="Second" @click="opendiv()"><p>I'm the second tab</p></b-tab>
</b-tabs>