Javascript VueJS如何在for循环中每行（共3项）仅选择一项？

我有点受不了了。 问题是我只需要在项目列表中选择（单击）一个项目。 因此，在aaa>1、2、3的内部，我可以选择1、2或3，但不能选择多个。然后在bbb>1、2、3的内部相同。但我无法理解，因为最终结果应该是aaa>1（已选择）、2、3 bbb>1、2（已选择）、3等等。。。 这是一个jsfiddle

HTML:

CSS

---

我建议您直接在数据项中设置要激活的子元素之一

data: {
items:  items: [{
    id: 1,
    value: 'aaa',
    active: [1]
  },
  {
    id: 2,
    value: 'bbb',
    active: [2]
  },
  {
    id: 3,
    value: 'ccc',
    active: [1, 2]
  },
  {
    id: 4,
    value: 'ddd',
    active: []
  },
  {
    id: 5,
    value: 'eee',
    active: []
  },
  {
    id: 6,
    value: 'fff',
    active: []
  },
  {
    id: 7,
    value: 'ggg',
    active: []
  }
]

},

为了更清楚，这里是您提供的修改后的JSFIDLE：

希望我能帮忙：）

---

好吧，我想我不明白你的问题，我编辑了JSFIDLE，我保留了相同的逻辑，但是当你点击列表项时，你添加或删除了你想设置为激活（或取消激活）的项目，就像这样，我不知道它是否是你想要的

<ul>
    <li v-for="item in items">
        {{ item.value }}
        <input v-for="i in [1,2,3]" :name="item.value" type="radio" :value="i" v-model="item.active">
    </li>
</ul>

{{item.value}}

功能方面是的，但html结构不是select>选项，它将是ul>li。（更新了我的问题）您正在使用的是

选择
元素吗？您的JSFIDLE只是一个标准的html列表。对不起，我的问题不清楚。我需要在点击时选择项目。好的，我编辑了我的答案，希望这次我能理解！（JSFIDLE也已经更新）我已经测试过了，它适用于我的案例。我完全忘记了输入绑定，我想我采用了一种过于复杂的方法。又是thx。
.active {
  color: white;
  background: black;
}

data: {
items:  items: [{
    id: 1,
    value: 'aaa',
    active: [1]
  },
  {
    id: 2,
    value: 'bbb',
    active: [2]
  },
  {
    id: 3,
    value: 'ccc',
    active: [1, 2]
  },
  {
    id: 4,
    value: 'ddd',
    active: []
  },
  {
    id: 5,
    value: 'eee',
    active: []
  },
  {
    id: 6,
    value: 'fff',
    active: []
  },
  {
    id: 7,
    value: 'ggg',
    active: []
  }
]

<ul>
    <li v-for="item in items">
        {{ item.value }}
        <input v-for="i in [1,2,3]" :name="item.value" type="radio" :value="i" v-model="item.active">
    </li>
</ul>