Vue 3 使用 v-model 改变 Bootstrap 5 表类答案

【问题标题】：Vue 3 usage of v-model changes Bootstrap 5 table classVue 3 使用 v-model 改变 Bootstrap 5 表类
【发布时间】：2022-08-20 15:50:20
【问题描述】：

下面是我正在编写的代码示例：

<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-model 之前，代码正确显示了 Bootstrap 5 表类。只是在我添加表中的类无法正常工作之后。

我有其他引导类，它工作正常。

知道为什么将 v-model 引入我的表列会干扰引导类吗？有没有办法解决它？

我很茫然，因为我最近才开始使用 Vue。尝试查找解决方案，但我得到的最接近的是“将它们放在子元素中”。但我的输入是子元素，它正在造成严重破坏。

标签： javascript html css vuejs3 bootstrap-5

【解决方案1】：

首先，您应该从输入中删除属性 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>

文档：https://vuejs.org/guide/essentials/forms.html#lazy

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。