Vuejs引导程序4单选按钮组在表中没有反应

Question

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

我正试图在el表中的vuejs中实现单选按钮。单击单选按钮时，我无法更改变量ownedFilterGroups中的状态。ownedFilterGroups中的actionFg键可以根据用户选择的单选按钮获得值0,1或2。我的方法出了什么问题？我提到https://getbootstrap.com/docs/4.0/getting-started/introduction/以创建单选按钮组。PS：删除数据切换并没有解决这个问题。

<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"。因为如果使用CCD_ 8，则单选框的值将为String。

完整更新的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>