无法为<span>第 < 个 v-for= " " >标签内的标签设置 ID 值

Question

我正在尝试将v-for循环的值设置为for循环内标记的ID值。

<table class="APPPPTable" style="width:100%;font-size:11px;">
<thead>
<tr>
<th v-for="heading in tableInfo.columns" class="text-center">
<span id="heading.field" v-html="heading.label"></span>
</th>
</tr>
</thead>
</table>

"heading.field"是有价值的。但每次我看到开发工具时，它都会显示as id="heading.field"的id值，而不是"heading.field"值。

Answer 1

您的span的id不是动态绑定的，您必须使用v-bind:或:才能以您想要的方式使用它：

看看例子：

<table class="APPPPTable" style="width:100%;font-size:11px;">
<thead>
<tr>
<th v-for="heading in tableInfo.columns" class="text-center">
<span :id="heading.field" v-html="heading.label"></span>
</th>
</tr>
</thead>
</table>

Answer 2

您可以尝试:id="heading.field"

Answer 3

<span id="heading.field">-><span v-bind:id="heading.field">

<table class="APPPPTable" style="width:100%;font-size:11px;">
<thead>
<tr>
<th v-for="heading in tableInfo.columns" class="text-center">
<span v-bind:id="heading.field" v-html="heading.label"></span>
</th>
</tr>
</thead>
</table>