CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-4
Penny
Penny

Reputation: 164

how to make bootstrap table including Vue Bindings?

i am working on a vue project and i am using bootstrap for styling. the table appear weird as you see on the image:

https://i.sstatic.net/gRifL.png

my code:

<table class="table table-bordered">
                        <thead>
                        <tr>
                            <th scope="col">variant</th>
                            <th scope="col">price</th>
                            <th scope="col">quantity</th>
                        </tr>
                        </thead>
                        <tbody>
                        <div v-if="!is2">
                            <div v-for="(variant, index) in options[0].variants" :key="index">
                                <tr>
                                    <th scope="row"><input type="text" class="form-control" :value="variant.name" disabled> </th>
                                    <td><input type="text" class="form-control"></td>
                                    <td><input type="text" class="form-control"></td>
                                </tr>
                            </div>
                        </div>
                        <div v-if="is2">
                            <div v-for="(variant1, index) in options[0].variants" :key="index">
                                <div v-for="(variant2, vIndex) in options[1].variants" :key="vIndex">
                                    <tr>
                                        <th scope="row"><input type="text" class="form-control" :value="variant1.name +' / '+ variant2.name" disabled> </th>
                                        <td><input type="text" class="form-control"></td>
                                        <td><input type="text" class="form-control"></td>
                                    </tr>
                                </div>
                            </div>
                        </div>
                        </tbody>
                    </table>

Upvotes: 1

Views: 80

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Because you're adding divs as direct children of the tbody element which breaks the style, you could use virtual element template to do the conditional rendering and the loop instead of div like :

 <template v-if="!is2">
  <template v-for="(variant, index) in options[0].variants" :key="index">
   <tr>
    <th scope="row"><input type="text" class="form-control" :value="variant.name" disabled> </th>
     <td><input type="text" class="form-control"></td>
     <td><input type="text" class="form-control"></td>
  </tr>
 </template>
</template>

Upvotes: 1

Related Questions