只允许一个单选按钮为真（从每个 item.value 中获取值）答案

【问题标题】：Allow only one radio button to be true (get value from each item.value)只允许一个单选按钮为真（从每个 item.value 中获取值）
【发布时间】：2019-11-24 01:05:55
【问题描述】：

我想解决以下问题：

我得到了一个这样的数据结构：

{
  "options": [
    {
      "id": 1,
      "title": "Car",
      "value": true
    },
    {
      "id": 2,
      "title": "Bike",
      "value": false
    },
    {
      "id": 3,
      "title": "Bus",
      "value": false
    }
  ]
}

现在我想为每个选项显示一个单选按钮：

<input v-for="(option,index) in options" type="radio" :key="index" :id="index" :value="true" v-model="option.value">

结果

我可以点击每个单选按钮，每个option.value 都设置为true。

这支笔显示问题：https://codepen.io/spqrinc/pen/NZZbjZ

所有值都设置为true，这对无线电选择没有影响。

我的目标

只允许一个单选按钮为true。选择Car 为true，因为它是在初始数据上设置的。

现在我的问题是：

我想我可以使用观察者来观察options 并观察value 的变化并取消设置所有其他值。但这是最好的选择吗？

【问题讨论】：

它们应该具有相同的name 属性
您是否考虑过使用组合框？它应该更适合您要完成的工作。
vuejs radio button component的可能重复
嗨 Massimo，很遗憾，这不是一个选项，因为用户需要编辑每个对象的标题，但应该只“选择”一个。
我创建了一个显示问题的代码笔 (codepen.io/spqrinc/pen/NZZbjZ)。我没有看到这是重复的。

标签： javascript vue.js vuejs2

【解决方案1】：

这是基本的 HTML 单选按钮，应使用相同的名称，并且一次只能选择一个值。检查下面的例子...

<input name="my_options" v-for="(option,index) in options" type="radio" :key="index" :id="index" v-model="option.value">

谢谢。希望对某人有所帮助。

【讨论】：

【解决方案2】：

您需要通过为组中的所有按钮分配相同的名称来定义单选按钮组：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Defining_a_radio_group

【讨论】：

我现在做了 - 但如果选择了另一个选项，这不会将 option.value 更改为 false。
不确定 Vue 是如何做到的，但要查看是否选中了单选按钮，您可以使用 checked 道具：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…
这是一个 HTML 元素，因此正如@Clarity 所写，您需要与checked 属性而不是value 相关联

【解决方案3】：

我不在 Vue js 中编写代码，但 :value="true" 对我来说似乎是个问题.. 尝试将其替换为 :value="option.value"

【讨论】：