javascript - Vue.js警告:组件渲染函数中的无限更新循环

通过我在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/