Включить вкладку с Javascript на Vuejs

Question

Так что я использую Vue и Bootstrap-Vue. Контекст: Это страница регистрации, в которой у меня есть 2 вкладки, где, когда первая вкладка завершена, вы можете нажать кнопку и перейти ко второй вкладке. Второй имеет атрибут «отключен», и когда я нажимаю на кнопку, он должен активировать вкладку. Я пытался сделать функцию javascript, но это не похоже на правду.

Мой код на Fiddle , а также здесь это соответствующая часть кода.

<b-tabs class = "the-tabs-group" v-model="tabIndex">
    <b-tab title="Primeira Fase" active>
        <div class="form-group row">  
            <label class="col-sm-1 col-form-label">Email:</label>
            <div class="col-sm-9">
                <input type="email" class="form-control " id="email"  name="email">
            </div>
            <hr>
            <label class="col-sm-1 col-form-label">Senha:</label>
            <div class="col-sm-9">
                <input type="password" class="form-control" id="pwd" name="pwd">
            </div>
            <hr>
            <label class= "confirmsenha col-sm-1 col-form-label">Confirmar senha:</label>
            <div class="col-sm-9">
                <input type="password" class="form-control" id="cpwd" name="cpwd">
             </div>
        </div>
    </b-tab>
    <b-tab id="segundaFase" title="Segunda Fase" disabled >
        <div id = "bb">
            <h1>Quase lá!</h1>
            <p>Loren ipsum sit amet,consecteur adisplinig elit.Etiam eget commodo nignbi phometehues</p>
        </div>      
    </b-tab>
</b-tabs>

<div class="next">
    <a>
        <b-btn id="nois" class="btn-link" @click="tabIndex++; enableTab">Próxima Fase</b-btn>
    </a>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        tabIndex: 0
    },
    methods:{
        enableTab: function(){
        console.log("chamou");
        var tab = document.getElementById("segundaFase");
        tab.removeAttribute('disabled'); }
            }
})
</script>

Answer 1

Присвойте свой атрибут элементу реактивных данных

<b-tab id="segundaFase" title="Segunda Fase" :disabled=‘disabled’ >


data: {disabled:true}

В обработчике кликов измените данные

onClick(){ this.disabled=!this.disabled}

Answer 2

Вы можете установить activeTab в данных вашего компонента:

data: {
   activeTab: 'tab1',
   name:'',
   email:''
  },

, затем 2 простых метода для установки активной таблицы и возврата логического значения, которое вы будете использовать для визуализации html:

 methods: {
    isActiveTab(tabId){
        return this.activeTab === tabId
    },
    setActiveTab(tabId){
        this.activeTab = tabId
    }

.. и вычисленное для вашего :disabled свойство вашего элемента кнопки

computed: {
    formIsComplete(){
    //here you might want to add some more adequate validation rules
    return this.email.length > 0 && this.name.length > 0
    }
  }

Html side:

<div id="app">
  <div class="tab" v-if="isActiveTab('tab1')">
    <h2>Tab 1:</h2>
    <span> Whatever content you want in tab1</span>
    <input v-model="email" type="email"/><label>Email</label>
    <input v-model="name" type="text"/><label>Name</label

      <button @click="setActiveTab('tab2')" :disabled="!formIsComplete">
          Change tab
      </button>

  </div>

  <div class="tab" v-if="isActiveTab('tab2')">
    <h2>Tab 2:</h2>
    <span> Congrats you made it to Tab2</span>
  </div>
</div>

См. простую скрипку здесь

Answer 3

Эту опцию можно реализовать другим способом, используя свойство отключенной вкладки. Я приведу код ниже и объясню

<div id="app">

 <b-tabs>

   <b-tab title="first" active>
     <br>I'm the first tab
     <button v-on:click="enableThirdTab">Enable third tab</button>
   </b-tab>

   <b-tab title="second">
      <br>I'm the second tab
   </b-tab>

   <b-tab title="third" v-bind:disabled="tabDisabled">
     <br>Im the third tab
   </b-tab>

 </b-tabs>

</div>




new Vue({
  el:'#app',
  data:function(){
   return {
     tabDisabled:true
   }
  },
 methods:{
    enableThirdTab:function(){
      this.tabDisabled = false;
   }
 }

});

Вы можете использовать свойство disabled вкладки b, чтобы включить или отключить его программным способом

Итак, в вашей функции данных создайте свойство tabDisabled с true в качестве первого состояния и привяжите его к вкладке как v-bind: disabled = "tabDisabled"

Тогда у вас может быть метод в методах: {} enableTab, где все, что вам нужно сделать, это установить this.tabDisabled = false;