Bootstrap Striped-table not working with Vuejs

user_621056 0
Viewed 1577

I am creating a friends component that lists users friends based on a response from an endpoint.

I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class

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

when I do a v-for the table renders correctly but the rows are only showing one background color

This is my template code

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

incorrect table

vuejs2 bootstrap-4 twitter-bootstrap laravel vue.js
1 Answers

You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.

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