Vuejs bootstrap4单选按钮组在表中没有反应

Question

这里的工作代码沙箱：https://codesandbox.io/s/crazy-bardeen-53qxk?file=/src/App.vue

我正在尝试在 el-table 中的 vuejs 中实现单选按钮。单击单选按钮时，我无法更改变量 ownedFilterGroups 中的状态。 ownedFilterGroups 中的actionFg 键可以根据用户选择的单选按钮获得值 0,1 或 2。我的方法有什么问题？我参考了https://getbootstrap.com/docs/4.0/getting-started/introduction/ 来创建单选按钮组。 PS: 移除 data-toggle 并没有解决问题。

      <el-table
        :data="ownedFilterGroups"
        :default-sort="{ prop: 'FilterGroupId' }"
        v-loading="loading.filter_groups"
        max-height="400px"
        stripe
      >
        <el-table-column
          label="Filter Group ID"
          :sortable="true"
          width="350px"
        >
          <template slot-scope="scope">
            {{ scope.row.filterGroupId }}
          </template>
        </el-table-column>
        <el-table-column label="Action">
          <template slot-scope="scope">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-outline-primary active">
                <input
                  type="radio"
                  :name="scope.row.filterGroupId"
                  :id="1"
                  :value="1"
                  v-model="scope.row.actionFg"
                />
                Replace With New Version
              </label>
              <label class="btn btn-outline-primary">
                <input
                  type="radio"
                  :name="scope.row.filterGroupId"
                  :id="2"
                  :value="2"
                  v-model="scope.row.actionFg"
                />
                Append New Version
              </label>
              <label class="btn btn-outline-secondary">
                <input
                  type="radio"
                  :name="scope.row.filterGroupId"
                  :id="0"
                  :value="0"
                  v-model="scope.row.actionFg"
                />
                Do Nothing
              </label>
            </div>
          </template>
        </el-table-column>
      </el-table>

数据模型包含一个变量：

ownedFilterGroups: [{
    actionFg: 0,
    filterGroupId: "aaa"
},{
    actionFg: 0,
    filterGroupId: "bbb"
}]

Answer 1

您遇到的问题应该是单选按钮在选中时不会突出显示，尽管数据属性已经更新。

解决方案是绑定:class="{'active': scope.row.actionFg === 0/1/2}"。

另一个问题是actionFg 应该是一个数字，所以单选框的值也应该是数字。您应该使用:value="0/1/2" 而不是value="1/2/0"。因为如果使用value="1/2/0"，单选框的值将是String。

Full Updated CodeSandBox

更新模板：

<template>
  <div>
    <el-table
      :data="ownedFilterGroups"
      :default-sort="{ prop: 'FilterGroupId' }"
      max-height="400px"
      stripe
    >
      <el-table-column label="Filter Group ID" :sortable="true" width="350px">
        <template slot-scope="scope">{{ scope.row.filterGroupId }}</template>
      </el-table-column>
      <el-table-column label="Action">
        <template slot-scope="scope">
          <div class="btn-group btn-group-toggle">
            <label class="btn btn-outline-primary active" :class="{'active': scope.row.actionFg === 1}">
              <input
                type="radio"
                :id="1"
                :name="scope.row.filterGroupId"
                :value="1"
                v-model="scope.row.actionFg"
              >
              Replace With New Version
            </label>
            <label class="btn btn-outline-primary" :class="{'active': scope.row.actionFg === 2}">
              <input
                type="radio"
                :name="scope.row.filterGroupId"
                :id="2"
                :value="2"
                v-model="scope.row.actionFg"
              >
              Append New Version
            </label>
            <label class="btn btn-outline-secondary" :class="{'active': scope.row.actionFg === 0}">
              <input
                type="radio"
                :name="scope.row.filterGroupId"
                :id="0"
                :value="0"
                v-model="scope.row.actionFg"
              >
              Do Nothing
            </label>
          </div>
        </template>
      </el-table-column>
    </el-table>
    {{ownedFilterGroups}}
  </div>
</template>