Блог

Я столкнулся с проблемой, когда я хочу отобразить больше переключателей при выборе первых переключателей.

Чего я хочу добиться, так это того, что мне нужно показать первые три переключателя, A , B и C . И когда я выбираю C , я хочу, чтобы дисплей D и E переключатели были вместе.

В настоящее время отображаются все переключатели

Вот код для этого:

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

И сценарий:

 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' },
        ]
   }
}
 

Есть какие-нибудь предложения?

Не уверен, каким будет значение выбранного, однако, если это целое число.

     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;
        }
    },
 

Однако, возможно, было бы лучше создать отдельную группу и показывать ее только в том случае, если выбранное значение равно c..