Vuejs警告：组件渲染功能中的无限更新循环

Question

在vue js中完成我的第一个项目。 在这里，循环浏览不同的标签，并在点击时显示每个标签的正确内容。

https://codepen.io/anon/pen/vWPMGq?editors=1010

这里的问题是与线 this.cardData = $(".card-content").html(this.coinInfo[this.activeTabName]); 但我不确定如何解决这个问题。

Answer 1

如果不是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可以通过属性传递，而不是声明为数据。