Bootstrap Полосатый стол не работает с Vuejs

Question

Я создаю компонент друзей, который выводит список друзей пользователей на основе ответа от конечной точки.

Я хочу отобразить ответы в строках таблицы, как часть этого, я хотел бы использовать загрузочную полоску-table class

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

, когда я делаю v-для таблицы правильно отображается, но строки показывают только один цвет фона

Это мой код шаблона

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