繁体   English   中英

如何使用多个 b-form-radio-group 避免它们之间的视觉干扰?

How can I use multiple b-form-radio-group avoiding visual interference among them?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是使用 Vue 尤其是 Bootstrap Vue 的新手,我正在尝试构建一个包含多个无线电组的表单。

我的问题是,当我更改其中一个值时,其他值不会更改它们的值(已使用 Vue DevTools 进行了检查),但从视觉上看,似乎没有选择任何值

我不知道我的方法有什么问题

我在这里发布了代码的简化版本以寻求帮助,在此先感谢:

<template>
  <div>

    <b-form-group label="Radio group 1" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-1"
        v-model="selected1"
        :options="options1"
        :aria-describedby="ariaDescribedby"
        name="radio-options"
      ></b-form-radio-group>

    </b-form-group>
      <b-form-group label="Radio Group 2" v-slot="{ ariaDescribedby }">
        <b-form-radio-group
          id="radio-group-2"
          v-model="selected2"
          :options="options2"
          :aria-describedby="ariaDescribedby"
          name="radio-options"
        ></b-form-radio-group>
      </b-form-group>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected1: 'first',
        options1: [
          { text: 'First', value: 'first' },
          { text: 'Second', value: 'second' },
        ],
        selected2: 'one',
        options2: [
          { text: 'One', value: 'one' },
          { text: 'Two', value: 'two' },
       ]
      }
    }
  }
</script>
1 个回复

由于两个<b-form-radio-group>元素具有相同的名称“radio-options”,因此在视觉上它们被视为一组。 不同的v-model仍然会正确地 function 但这不是你想要的视觉效果。 给第二组一个不同的名字:

<b-form-radio-group
  id="radio-group-2"
  v-model="selected2"
  :options="options2"
  :aria-describedby="ariaDescribedby"
  name="radio-options2"   
></b-form-radio-group>

在这里,我将其更改为radio-options2

3 单选按钮未选中(变为蓝色)

我正在使用Bootstrap-vue.JS来制作一组单选按钮。 我有一个重置 function 来检查其中一个单选按钮。 当我调用 function 时,单选按钮的值按我的预期发生了变化,但单选按钮本身并没有显示它的变化(圆圈没有变成蓝色) 这是模板 这是创建vue时的初始化 这是重置 funct ...

6 避免网络上多个Matplotlib数字之间的干扰

我有一个嵌入了多个Matplotlib数字的页面。 这些数字通过Ajax插入/操作如下(带有时间戳以便浏览器重新加载): 然后将网址匹配到一个视图(我应该提到我使用Django): 图表模块(somedata.py)如下所示: 使用matplotlib版本0.99。? ...

7 如何使用 mat-radio-group 选择多个选项

我使用 mat-radio-group 有多个单选按钮,但我无法选择/检查多个单选按钮(单选按钮是通过迭代数组生成的)。 我也尝试过编码,以便单选按钮都具有相同的名称,但我仍然无法选择多个值。 我做错了什么? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM