只允許一個單選按鈕為真（從每個 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

這是基本的 HTML 單選按鈕，應該具有相同的名稱，並且一次只能選擇一個值。 檢查下面的例子...

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

謝謝你。 希望對某人有所幫助。

Answer 2

您需要通過為組中的所有按鈕分配相同名稱來定義單選按鈕組： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Defining_a_radio_group

Answer 3

我不在 Vue js 中編碼，但:value="true"對我來說似乎是問題。嘗試用 :value="option.value" 替換它