VueJS 使用 v-for 变量作为属性值

Question

我有一个迭代循环，它在对象数组上使用 v-for，然后呈现 html li 项

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

这里的问题是 tabindex 属性中的 key 没有被渲染，被渲染的是 {{ key }}.

如何获取 key 的值用于 tabindex？我也试过，:tabindex 但这给了我一个 Javascript 错误。

Answer 1

Interpolation within attributes is not valid in Vue v2.

您需要像这样将 tabindex 属性绑定到 key：

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

Here's a working fiddle.