Below is a snippet of the code I wrote:
<table class="table table-striped">
<tr class="table-dark">
<th>#</th>
<th>Column 1</th>
<th colspan="3">Column 2</th>
</tr>
<tr class="table-info">
<th></th>
<th>Title</th>
<th>0</th>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td></td>
<td>Category</td>
<td>
<input
class="form-check-input"
type="radio"
name="category"
value="0"
v-model="categoryMdl"
/>
</td>
<td>
<input
class="form-check-input"
type="radio"
name="category"
value="1"
v-model="categoryMdl"
/>
</td>
<td>
<input
class="form-check-input"
type="radio"
name="category"
value="2"
v-model="categoryMdl"
/>
</td>
</tr>
</table>Before adding v-model, the Bootstrap 5 classes in the table displayed correctly. However, after adding it, there were issues with the styling.
I have other Bootstrap classes implemented elsewhere which function properly.
Can anyone explain why introducing v-model into my table columns disrupts the Bootstrap classes? Is there a solution to this issue?
I'm struggling with this problem since I am new to Vue.js. I've tried researching solutions, but the advice to "put them in the child element" hasn't resolved the problem caused by the inputs being child elements themselves.