Vuejs：当制表符处于活动状态时如何调用方法，而在其关闭时如何调用另一个方法

Question

我有两个方法opendiv（）和closediv（）。我需要这些来打开和关闭可折叠部分。我单独测试时效果很好。但是我需要根据条件执行此操作，如果第二个选项卡处于活动状态，则需要调用opendiv（）方法，而当第二个选项卡处于非活动状态时，则需要调用closediv（）方法。我该如何实现？

<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>

Answer 1

您可以利用单击选项卡或通过键盘导航激活时发出的'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>

Answer 2

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，表示已设置，但未设置任何内容。如果标记中不存在它，则它将返回null。

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

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