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

Posted

技术标签:

【中文标题】VueJS 使用 v-for 变量作为属性值【英文标题】:VueJS use v-for variable as attribute value 【发布时间】:2018-01-22 10:35:37 【问题描述】:

我有一个迭代循环,它在对象数组上使用 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 错误。

【问题讨论】:

【参考方案1】:

Interpolation within attributes is not valid in Vue v2.

您需要将tabindex 属性绑定到key,如下所示:

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

Here's a working fiddle.

【讨论】:

以上是关于VueJS 使用 v-for 变量作为属性值的主要内容,如果未能解决你的问题,请参考以下文章

如何在 v-for vue js 中创建增量变量

vuejs学习笔记--属性,事件绑定,ajax

vuejs学习笔记--属性,事件绑定,ajax

为什么不使用checked属性true vuejs渲染复选框

Vuejs - 如何使用 v-for 获取数组中的所有唯一值(删除重复项)

使用 v-for - vuejs 绑定本地图像