Radio Button Display as current Value

I have a radio button that act as status selector for company record. Problem is when edit record. i want radio button in editdialog preselect according to current status of record.

current code

<v-radio-group v-model="company.status" row mandatory>
   <v-radio label="Active" color="red" value="Active" />
   <v-radio label="Inactive" color="red" value="Inactive" />
</v-radio-group>

I’ve tried a solution as in this link and it still don’t work as intend.

<v-radio-group label="Status:" v-model="radioadd" row mandatory>
   <v-radio label="Active" color="red" :value="Active" key="0" />
   <v-radio label="Inactive" color="red" :value="Inactive" key="1" />
</v-radio-group>

this time it warn me that Active and inactive property or method is not define.

pls advise

ps. I’m pretty new to coding and vue (2week)

Update solved

       <v-radio-group v-model="company.status" row>
          <v-radio label="Active" color="red" :value="'Active'"/>
          <v-radio label="Inactive" color="red" :value="'Inactive'"/>
       </v-radio-group>

Answer

Your second example is mostly correct. However, the :value binding expects an expression, and in this case it’s true that the binding cannot find a variable/property named Active or Inactive on the model. Instead, you could wrap the value bindings in quotes (because 'Active' in JavaScript is an expression which evaluates as a string literal):

<v-radio label="Active" color="red" :value="'Active'" key="0" />

Note the quotes around Active.

Alternatively, you can use the literal modifier, which tells the value binding to interpret the given value as a literal rather than an expression:

<v-radio label="Active" color="red" :value.literal="Active" key="0" />

Whichever approach you choose, apply the same to the Inactive radio button element.