Vuejs warning: infinite update loop in a component render function

Question

working through my first project in vue js. Here, looping through different tabs and show correct content for each tab when clicked on.

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

problem here is with line this.cardData = $(".card-content").html(this.coinInfo[this.activeTabName]); but I'm not sure how to fix this.

Skeith Skeith · Accepted Answer · 2017-12-05T09:20:00

You shouldn't be mixing jquery and Vue if it's not 100% necessary.

Here a simple way to do it:

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 instance

new Vue({
    el: '#root',
    data: {
        activeTabName: 'Description',
        tabs: [
            {
                name: 'Description',
            },
            {
                name: 'Features',
            },
            {
                name: 'Technology',
            }
        ],
        coinInfo: {
            Description:'DescriptionContent',
            Features:'FeaturesContent',
            Technology:'TechnologyContent'
        }
    }
 })

coinInfo could be passed by properties instead of beeing declared as data.

Vuejs warning: infinite update loop in a component render function

1 Answers