Как получить доступ к индексу в vue.js для элемента цикла?

Question

В vue.js у меня есть

                        <button v-bind:class="[mdc-tab, {index==currentTab : mdc-tab--active}]" role="tab" aria-selected="true" v-for="(tab,index) in tabs.data" v-bind:key="tab.id">
                            <span class="mdc-tab__content">
                                <span class="mdc-tab__icon material-icons" aria-hidden="true">{{tab.icon}}</span>
                                <span class="mdc-tab__text-label">{{tab.name}}</span>
                            </span>
                            <span v-bind:class="[mdc-tab-indicator, {index==$root.currentTab : mdc-tab-indicator--active}]">
                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                            </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>

index - текущий индекс цикла.currentTab происходит от

            tabs : {
                currentTab : 0,
                data : [
                    {icon:'title',name:'Name'},
                    {icon:'style',name:'Tags'},
                    {icon:'info',name:'Status'},
                    {icon:'warning',name:'Restriction'},
                    {icon:'keyboard_arrow_right',name:'Other'}
                ]
            }

Я получаю эту ошибку

- invalid expression: Unexpected token == in

    [mdc-tab, {index==currentTab : mdc-tab--active}]

  Raw expression: v-bind:class="[mdc-tab, {index==currentTab : mdc-tab--active}]"

Как я могу это исправить?

Спасибо

Answer 1

Требуется противоположное, то есть имя класса в качестве ключа и условие в качестве значения:

v-bind:class="['mdc-tab', { 'mdc-tab--active': index === tabs.currentTab }]"

То же самое для индикатора:

v-bind:class="['mdc-tab-indicator', { 'mdc-tab-indicator--active': index === tabs.currentTab }]"