VueJS использует переменную v-for в качестве значения атрибута

У меня есть итеративный цикл, который использует v-for для массива объектов, который затем отображает элемент html li

<li class="block" v-for="(section, key) in sectionDetails">
    <a href="#" tabindex="{{ key }}">Item {{ key }}</a>
</li>

Проблема здесь в том, что key в атрибуте tabindex не отображается, а отображается {{ key }}.

Как я могу использовать значение key для tabindex? Я тоже пробовал, :tabindex но это выдает ошибку Javascript.


person Stefan Dunn    schedule 14.08.2017    source источник


Ответы (1)


Интерполяция внутри атрибутов недопустима в Vue v2.

Вам нужно привязать атрибут tabindex к key следующим образом:

<a href="#" :tabindex="key">Item {{ key }}</a>

Вот рабочая скрипка.

person thanksd    schedule 14.08.2017