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

Question

我想解决以下问题：

我有一个像这样的数据结构：

{
  "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的变化，并取消设置所有其他值。但这是最好的选择吗？

Answer 1

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

Answer 2

我没有用Vue js编写代码，但是:value="true"似乎是我的问题。 尝试将其替换为：value =“ option.value”

Answer 3

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

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

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