Level 73
The radio button has only a property deciding if it should be checked or not.
<input type="radio"> <!-- Unchecked -->
<input type="radio" checked> <!-- Checked -->
1 like
Sep 21, 2022
7
Level 63
Initialization of radio buttons
Hello,
I'm using Element-Plus CSS framework for VueJS and InertiaJS.
I need to initialize radio buttons in an edit form. I pass the values as props to the form and I display the form.
<el-radio-group v-model="scope.row.pivot.role">
<el-radio v-for="(role, key, index) in roles" :label="key" :key="'user-'+scope.row.id+'-role-'+key"><span @click="assignRole(scope.row.id, key)">{{ role.name }}</span></el-radio>
</el-radio-group>
The roles come from a config file.
'roles' => [
1 => [
'name' => 'Admin',
'type' => 'danger',
],
2 => [
'name' => 'Comptable',
'type' => 'warning',
],
3 => [
'name' => 'Utilisateur',
'type' => 'success',
],
],
When I load the page, none of the radio buttons are selected whereas one button radio should be selected according to the value of scope.row.pivot.role.
I specify that all works fine except the initialization of the radio buttons.
Here is the documentation of Element-Plus radio buttons.
https://element-plus.org/en-US/component/radio.html
I have no console error.
I really don't understand why it doesn't work.
Thanks for your help ;).
V
Level 63
@Tray2 Ok so what you mean is that the v-model doesn't act to check automatically the right radio button ?
Level 73
@vincent15000 Don't know, I almost never use radio buttons in my forms and never with Vue.
This might help
https://stackoverflow.com/questions/34865348/vuejs-set-a-radio-button-checked-if-statement-is-true
1 like
Level 63
@Tray2 Tried, but doesn't work.
Level 63
I had to change the value for each of the radio buttons. Normally the key should have worked (it was the righet value), but not and I don't understand why. I have change key for the role id (in fact the role number written in the configuration file) that I have added to the configuration file and it works.
That's really strange because the key had exactly the same value.
Do you have any idea ?
Level 28
@vincent15000 with only two little snippet it's hard to be certain, but I'm pretty sure that your v-model is one (if not the only) cause of your problem. The variable within v-model should be a data property or a computed (with get/set). That property or computed should return an array of the selected roles (or role keys if I understand your logic properly). To populate this array on the initial load, you can leverage the created lifecycle hook to match your selected roles within the roles array. Hard to explain in text only, but can't really do otherwise with so little code.
1 like
Level 28
@vincent15000 in other words, radio buttons can be achieved differently based on the code/components structure, which is hard to tell with your current code snippets. Also, it would be nice if you could detail what is the format of each variables, especially scope.row.pivot.role.
1 like
Please or to participate in this conversation.