Vuetify radio button checked with value in edit form-CodePudding

I have a table with the option to edit each row. When I click on edit, a form pops up and shows the fields filled out with the data to edit. However, the selected radio button is not showing with the data selected before as a value, I only got the two radio buttons unchecked.

How can I make the correct radio button show the correct checked value? This is my code

<v-card-subtitle > CONTRACT TYPE </v-card-subtitle>
<v-radio-group v-model="dataItem.type_contract" row >
    <v-radio name="dataItem.type_contract" label="DIRECTO" value="direct" ></v-radio>
    <v-radio name="dataItem.type_contract" label="CONTINGENCIA" value="contingency" ></v-radio>
</v-radio-group>

On the data I have this

dataItem: new ContractModel(),

Thanks for the help!

CodePudding user response：

I found a solution that works for my case

I had to change the v-model on the v-radio-group and set it to a prop like this

<v-radio-group v-model="radioGroup" row >
    <v-radio label="DIRECTO" value="direct"></v-radio>
    <v-radio label="CONTINGENCIA" value="contingency"></v-radio>
</v-radio-group>

on Data

    radioGroup: 'direct',

And because the edit modal is activated by a button I set the values like this

{
    icon: "mdi-pencil",
    description: "Editar",
    action: (params) => {
                this.modeEdit = true;
                this.dialogAddEdit = true;
                this.dataItem = JSON.parse(JSON.stringify(params[0]));
                if (this.dataItem.type_contract === "DIRECTO") {
                   this.radioGroup = 'direct';
                } else{
                   this.radioGroup = 'contingency';
                 } 
    },