每个条目的链接用逗号分隔答案

【问题标题】：Having links to each entry seperated from each other by a comma每个条目的链接用逗号分隔
【发布时间】：2020-09-29 17:40:37
【问题描述】：

我有一张表，其中一列包含A,B,C 或D,E 或F 之类的值。现在，我所做的是，我在此列中的每个条目下方都有一个超链接，当用户单击它时，他将被重定向到另一个页面（我创建的），并将此值传递给该页面表单.

但是，目前，超链接显示在完整列值下方，即出现在 A,B,C 或 D,E 下方。相反，我想要的是，它应该是每个值，即A、B、C。因此，当用户单击任何单个值时，将使用该值而不是完整值（A,B,C）重定向他。这是我现在写的代码。表格是这样的：

      <b-table
        v-if="rows.length"
        :thead-tr-class="'bug-report-thead'"
        :tbody-tr-class="'bug-report-tbody'"
        :items="rows"
        :fields="columnsToDisplay"
        :sort-compare="sortTableByKey"
        :striped="true"
        :bordered="true"
        :outlined="true"
        :hover="true"
        :no-sort-reset="true"
        :show-empty="true"
        :filter="filter"
        @filtered="onFiltered"
        :empty-text="emptyText"
        :sort-desc="true"
        :caption-top="true"
        responsive>
/b-table>

    <template slot="_id" slot-scope="data">
      <a v-if="data.item._id" href="#" @click.prevent="onClickId(data.item._id)">
        {{ data.item._id }}
      </a>
    </template>

    onClickId (id) {
      if (id) {
        this.$router.push({path: `/my-path/my-webpage2/${id}`})
      }
    }

item 这里是一个包含一堆属性的对象。其中一个属性是ID，它包含一个逗号分隔值的字符串。我希望，当用户单击任何单个值时，他会使用该特定值而不是整个字符串进行重定向。

我也可以检查一下，如果其中一个值等于Hello World，那么超链接就不会出现吗？

【问题讨论】：

缺少信息可以回答。什么是“日期”？什么是“项”？无论如何，看起来你需要一个重复结构（如 v-for）来做你想做的事。
@gulima，我在原始问题中添加了一些说明。

标签： javascript html twitter-bootstrap vue.js

【解决方案1】：

我想你正在使用 Bootstrap 表。在这种情况下，引导表提供了一个单元格slot。由于您希望每个条目都有超链接，因此您需要使用此插槽将值注入到卖出中。

将template 移动到<b-table> 中并更新其插槽绑定。

<b-table {...props}>
  <template v-slot:cell(key)="{value}">
     <a href="#" @click.prevent="onClickId(value)">
    {{ value }}
    </a>
   </template>
</b-table>

请记住，key 应该是该字段的名称。

【讨论】：