Bootstrap 条纹表不适用于 Vuejs

Question

我正在创建一个朋友组件，它根据端点的响应列出用户的朋友。

我想将响应呈现到表的行中作为其中的一部分我想使用引导条带表类

https://getbootstrap.com/docs/4.0/content/tables/#striped-rows

当我做一个 v-for 表格渲染正确但行只显示一种背景颜色

这是我的模板代码

<template>
    <div>
        <h5 class="mb-4">Friends</h5>
      <table class="table table-borderless table-striped ">
                <tbody>
                    <div v-for="(friend, index) in UserStore.friends">
                        <tr>
                            <td class="text-center" style="width: 100px;">
                                <img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
                            </td>
                            <td>
                                <a href="javascript:void(0)">{{friend.name}}</a><br>
                                <a href="javascript:void(0)" class="text-muted"><small>29 years old on Friday</small></a>
                            </td>
                            <td class="text-center" style="width: 80px;">
                                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-xs btn-primary" data-toggle="tooltip" title="" style="overflow: hidden; position: relative;" data-original-title="Send a gift"><i class="fa fa-gift"></i></a>
                            </td>
                        </tr>
                    </div>
                </tbody>
            </table>
        <div v-if="!UserStore.friends">
            <h6>You don't have any friends :(</h6>
            <a href="">Lets solve that Right now!</a>
        </div>
    </div>
</template>

Answer 1

您应该使用一个template元素来呈现这些行。.table-striped与兄弟行一起使用，并且在您的代码中，这些行不是兄弟姐妹，因为它们每个都有一个 div 父级，因此每一行都被视为第一行。

<tbody>
    <template v-for="(friend, index) in UserStore.friends">
        <tr>
            <td class="text-center" style="width: 100px;">
                <img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
            </td>
            <td>
                <a href="javascript:void(0)">{{friend.name}}</a><br>
                <a href="javascript:void(0)" class="text-muted"><small>29 years old on Friday</small></a>
            </td>
            <td class="text-center" style="width: 80px;">
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-xs btn-primary" data-toggle="tooltip" title="" style="overflow: hidden; position: relative;" data-original-title="Send a gift"><i class="fa fa-gift"></i></a>
            </td>
        </tr>
    </template>
</tbody>