如何根据VUEJS中选定的单选按钮显示单选按钮

时间:2021-05-18 02:37:15

标签: vuejs2

我面临一个问题,我想在选择第一个单选按钮时显示更多单选按钮。

我想要实现的是我需要显示前三个单选按钮,ABC。当我选择 C 时,我想同时显示 DE 单选按钮。

当前所有的单选按钮都在显示

这是它的代码:

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

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

不确定 selected 的值是什么,但是如果它是整数。

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

创建一个单独的组可能是一个更好的主意,并且只有在 selected 的值为 c.. 时才显示它。

相关问题