CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
BJ GDRX
BJ GDRX

Reputation: 79

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>

Upvotes: 2

Views: 476

Answers (2)

tony19
tony19

Reputation: 138696

You don't need to change anything with value. The markup you already have is correct (i.e., value="Active" is correct and makes the radio group's value equal to "Active" when this radio is selected).

To initialize the radio group to the current value of company.status, that property needs to equal one of the values within the radio group (i.e., "Active" or "Inactive").

export default {
  data() {
    return {
      company: {
        status: 'Inactive' // initial value of radio group
      }
    }
  }
}

demo

Upvotes: 1

Matt U
Matt U

Reputation: 5118

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.

Upvotes: 1

Related Questions