关于复选框和单选按钮的问题

Question

I'm using element-ui and I have no idea how to make it work. I have the following code:

<div v-for="(solution, s_index) in scope.row.arrayDefectiveActions"
:key="`${requirementTemplateTypeIndex}.${requirementExtendedItemIndex}.${s_index}`"
 style="display: inline-block;" class="p-sm">

<el-checkbox v-model="solution.checkActionTaken" 
:disabled="!scope.row.checkDefectiveItem" 
@change="articleChanged(requirementExtendedItem)">

</el-checkbox>
</div>

My question is how can I transform this checkbox into radio buttons, because I tried to use the exact same code but changed only the checkbox and I can select all of them without unchecking the others

Answer 1

You must add :class="{'active':radio===item.id}" to the v-for iterator and use <el-radio v-model="radio" :label="item.id"> .

Here you can find a working example.

Best regards,

Brhaka

Answer 2

Have a look to the documentation on how to use the proper component.

• el-checkbox is for checkboxes
• el-radio for radios

Documentation: https://element.eleme.cn/#/fr-FR/component/radio