CODEWITHSUNDEEP
vue.jstabindexv-for
Stefan Dunn
Stefan Dunn

Reputation: 5513

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.

Upvotes: 6

Views: 7208

Answers (1)

thanksd
thanksd

Reputation: 55644

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.

Upvotes: 6

Related Questions