Javascript 仅允许一个单选按钮为true（从每个项获取值。值）

我想解决以下问题：

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

{
  "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">

结果 我可以单击每个单选按钮和每个

选项。值
设置为
true

此笔显示问题：

所有值均设置为
true
，这对收音机选择没有影响

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

现在我的问题是：

我想我可以使用一个观察者来观察
选项
，观察
值的变化
，并取消设置所有其他值。但是这是最好的选择吗？
您需要定义一个单选按钮组，将组中的所有按钮指定为相同的名称：
我不在Vue js中编写代码，但
：value=“true”
似乎是我的问题。。
尝试将其替换为：value=“option.value”
这是基本的HTML单选按钮，单选按钮应具有相同的名称，并且一次只能选择一个值。检查下面的示例

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



多谢各位。希望这对某人有所帮助。
他们应该有相同的
名称
属性您考虑过使用组合框吗？它应该更适合您试图完成的任务。Hi Massimo的可能副本，不幸的是，这不是一个选项，因为用户需要编辑每个对象的标题，但应该只“选择”一个。我创建了一个代码笔（）来显示问题。我看不出这是重复的。我现在看到了-但这不会将
选项更改。如果选择了另一个选项，则value
将更改为
false
。不确定Vue如何执行此操作，但要查看是否选中了单选按钮，您需要使用
checked
prop：这是一个HTML元素，因此@Clarity编写时，您需要与
checked
属性相关，而不是
值