无法为 <th v-for="" > 标签内的 <span> 标签设置 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" 有价值。但是每次我看到开发人员工具时，它都会显示 id="heading.field" 的 id 值，而不是 "heading.field" 值。

Answer 1

<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>

Answer 2

你可以试试:id="heading.field"

Answer 3

id 你的 span 没有动态绑定，你必须使用 v-bind: 或 : 到那个 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>

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

Cant set ID value for a <span> tag inside a <th v-for="" >tag

html

html-table

tooltip

vue.js

bootstrap-vue