vue.jstabindexv-for

VueJS use v-for variable as attribute value

I have an iterative loop that using v-for on an array of objects that then renders a html li item

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

The problem here is that key in the tabindex attribute is not being rendered, what IS being rendered is {{ key }}.

How can I get the value of key to be used for tabindex? I've also tried, :tabindex but that gives me a Javascript error.

Solution

  • Interpolation within attributes is not valid in Vue v2.

    You need to bind the tabindex attribute to the key like so:

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

    Here's a working fiddle.