Vue 3 v模型更改引导带5表类的用法
Vue 3 v模型更改引导带5表类的用法
提问于 2022-04-04 02:29:23
下面是我正在编写的代码的一个示例：
<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>最初，在我添加v模型之前，代码正确地显示了Bootstrap 5表类。只是在我补充说表中的类不能正常工作之后。
我有其他的引导类从表中出来，它运行良好。
知道为什么在我的表列中引入v模型会干扰引导类吗？有办法解决吗？
我不知所措，因为我最近才开始使用Vue。我试着查找解决方案，但我得到的最接近的方法是“将它们放在子元素中”。但是我的输入是子元素，它正在制造混乱。
回答 1
Stack Overflow用户
发布于 2022-08-08 21:24:29
首先，您应该从输入中删除属性value=“.”。并在数据中设置：
data() {
return {
categoryMdl1 : 0,
categoryMdl2 : 1,
categoryMdl3 : 2,
}
}然后更新HTML
<td>
<input
class="form-check-input"
type="radio"
name="category"
v-model="categoryMdl1"
/>
</td>
<td>
<input
class="form-check-input"
type="radio"
name="category"
v-model="categoryMdl2"
/>
</td>
<td>
<input
class="form-check-input"
type="radio"
name="category"
v-model="categoryMdl3"
/>
</td>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71731444
复制相关文章
相似问题
腾讯云开发者
