gpt4 book ai didi

javascript - 在 Vuejs 上使用 Javascript 启用选项卡

转载 作者:搜寻专家 更新时间:2023-10-30 22:19:17 25 4
gpt4 key购买 nike

所以我正在使用 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 的 bool 值:

 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>

查看 simple fiddle here

关于javascript - 在 Vuejs 上使用 Javascript 启用选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52349676/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com