Vuejs bootstrap4 radio button group not reactive in table

Question

Working code sandbox here: https://codesandbox.io/s/crazy-bardeen-53qxk?file=/src/App.vue

I'm trying to implement radio buttons in vuejs in an el-table. I am not able to change the states in a variable ownedFilterGroups on clicking the radio buttons. The actionFg key in ownedFilterGroups can attain the values 0,1 or 2 according to the radio button selected by the user. What is wrong with my approach? I have referred to https://getbootstrap.com/docs/4.0/getting-started/introduction/ to create the radio button group. PS: Removing data-toggle hasn't fixed the issue.

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

The data model contains a variable:

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

Answer 1

The problem you met should be the radio buttons will not be highlighted when checked, though the data property already been updated.

The solution is binding :class="{'active': scope.row.actionFg === 0/1/2}".

Another problem is actionFg should be one Number, so the values of radio box should be Number also. You should use :value="0/1/2" instead of value="1/2/0". because the value of the radio box will be String if uses value="1/2/0".

Full Updated CodeSandBox

Updated Template:

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