Check out the live code sandbox here: https://codesandbox.io/s/crazy-bardeen-53qxk?file=/src/App.vue
I am currently working on adding radio buttons to a Vue.js el-table. Despite my efforts, I am unable to update the state of a variable called ownedFilterGroups when the radio buttons are clicked. The key actionFg within ownedFilterGroups should be able to take on values of 0, 1, or 2 based on the radio button selected by the user. Could you take a look and let me know what might be wrong with my approach? I have consulted the https://getbootstrap.com/docs/4.0/getting-started/introduction/ documentation for creating the radio button group. P.S. I have tried removing the data-toggle attribute, but it did not resolve 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 includes a variable:
ownedFilterGroups: [{
actionFg: 0,
filterGroupId: "aaa"
},{
actionFg: 0,
filterGroupId: "bbb"
}]