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

【问题标题】：Vuejs warning: infinite update loop in a component render functionVuejs警告：组件渲染函数中的无限更新循环
【发布时间】：2017-12-05 04:07:59
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案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 可以通过属性传递，而不是通过声明为数据的方式传递。

【讨论】：