how to make bootstrap table including Vue Bindings?

user_15832066 0
Viewed 40

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.stack.imgur.com/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>
bootstrap-4 twitter-bootstrap vue.js
1 Answers

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