所以我正在使用Vue和Bootstrap-Vue。上下文:这是一个注册页面,我有2个选项卡,当第一个选项卡完成时,您可以点击按钮并传递到第二个选项卡。第二个具有'禁用'属性,当我点击我的按钮时,它应该启用选项卡。我试着做一个javascript函数,但它似乎不对。
My code is on 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>
您可以在组件数据中设置activeTab
:
data: {
activeTab: 'tab1',
name:'',
email:''
},
然后2个简单的方法来设置activetab并返回你将用于渲染你的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方面:
<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>
将您的属性分配给被动数据成员
<b-tab id="segundaFase" title="Segunda Fase" :disabled=‘disabled’ >
data: {disabled:true}
在您的单击处理程序中,改变数据
onClick(){ this.disabled=!this.disabled}
您可以通过使用选项卡的disabled属性以另一种方式实现此选项。我将在下面介绍一些代码并进行解释
<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;
}
}
});
您可以使用b-tab的属性disabled
以编程方式启用或禁用它
所以在你的数据函数中创建一个属性tabDisabled
,其中true为第一个状态,并将其绑定到选项卡为v-bind:disabled =“tabDisabled”
然后你可以在方法中使用方法:{} enableTab你需要做的就是设置this.tabDisabled = false;