通过我在VUE JS的第一个项目工作。
在这里,循环浏览不同的选项卡,并在单击时显示每个选项卡的正确内容。
https://codepen.io/anon/pen/vWPMGq?editors=1010
这里的问题是与线this.cardData = $(".card-content").html(this.coinInfo[this.activeTabName]);
但我不知道如何解决这个问题。
最佳答案
如果不是100%必要,则不应混用jQuery和Vue。
这是一个简单的方法:
https://jsfiddle.net/gmmujLs4/2/
的HTML
<div id="root">
<div class="navbar-start" v-for="tab in tabs">
<a class="navbar-item" href="#" @click="activeTabName = tab.name">{{tab.name}}</a>
</div>
<div class="card-content">
{{ coinInfo[activeTabName] }}
</div>
</div>
Vue实例
new Vue({
el: '#root',
data: {
activeTabName: 'Description',
tabs: [
{
name: 'Description',
},
{
name: 'Features',
},
{
name: 'Technology',
}
],
coinInfo: {
Description:'DescriptionContent',
Features:'FeaturesContent',
Technology:'TechnologyContent'
}
}
})
可以通过属性传递coinInfo,而不是将其声明为数据。
关于javascript - Vue.js警告:组件渲染函数中的无限更新循环,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47645935/