CODEWITHSUNDEEP
vuejs2
nsukhi singh
nsukhi singh

Reputation: 39

How to display radio buttons based on selected radio buttons in VUEJS

I am facing an issue where I want to display more radio buttons upon selection of the the first radio buttons.

What I want to achieve is that I need to show the first three radio buttons, A,Band C. And when I select C, I want to display D and E radio buttons together.

Currently all the radio buttons are displaying

Here is the code for it:

  <b-form-radio-group
    id="radio-group-1"
    v-model="selected"
    :options="options"
    name="radio-options"
   >
  </b-form-radio-group>

And the script:

data () {
   return {
    selected: null,
        options: [
          { value: '1', text: 'A' },
          { value: '2', text: 'B' },
          { value: '3', text: 'C' },
          { value: '4', text: 'D' },
          { value: '5', text: 'E' },
        ]
   }
}

Any suggestions?

Upvotes: 0

Views: 58

Answers (1)

Michael Mano
Michael Mano

Reputation: 3440

Not sure what the value of selected will be however if its the integer.

    data () {
        return {
            selected: null,
        }
    },
    computed: {
        options() {
            let defaults = [
                { value: 1, text: 'A' },
                { value: 2, text: 'B' },
                { value: 3, text: 'C' },
            ];
            if (this.selected >= 3) {
                return [
                    ...defaults,
                    { value: 4, text: 'D' },
                    { value: 5, text: 'E' },
                ];
            }
            return defaults;
        }
    },

Might be a better idea to make a seperate group however and only show it if the value of selected is c..

Upvotes: 1

Related Questions